I have 3 div groups, each containing a radio button, a label, and a button. I would like to be able to enable the button within the same group as the selected radio button, and make the buttons from other groups disabled.
<div class="row">
<div class="col-md-6">
<!-- when this radio button is checked... -->
<input id="input-1" type="radio" name="disable-button" checked="checked">
<label for="input-1">Input 1</label>
<!-- this button is enabled -->
<button type="button">ADD</button>
<!-- ...and vice versa -->
</div>
<div class="col-md-6">
<!-- when this radio button is not checked... -->
<input id="input-2" type="radio" name="disable-button">
<label for="input-2">Input 1</label>
<!-- ...this button should be disabled -->
<button type="button" disabled>ADD</button>
<!-- ...and vice versa -->
</div>
<div class="col-md-6">
<!-- when this radio button is not checked... -->
<input id="input-3" type="radio" name="disable-button">
<!-- ...this button should be disabled -->
<label for="input-3">Input 1</label>
<button type="button" disabled>ADD</button>
<!-- ...and vice versa -->
</div>
</div>
Is there a way to do this via jQuery?
edit: I would prefer the solution to be dynamic if possible in case I have to add more groups.
I would use the following jQuery code:
$('input[type=radio]').change(function(){
$('button').prop('disabled', true);
$(this).parent().find('button').prop('disabled', false);
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments