How can I determine which radio button is checked on click of a radio button using the Bootstrap Button plugin?
The following is evaluating to false no matter which radio button is selected:
HTML
<div class="btn-group" data-toggle="buttons" id="disabled-radio-btn">
<label class="btn btn-default">
<input type="radio" name="disabled" id="disabled-yes">Yes
</label>
<label class="btn btn-default">
<input type="radio" name="disabled" id="disabled-no">No
</label>
</div>
JS
$('#disabled-radio-btn').click(function (e) {
if ($('#disabled-no:checked').length) {
$('#SSDI').hide();
}
else {
$('#SSDI').show();
}
});
should be $('#disabled-no').is(':checked') in the if statement to check if the radio button is checked.
$('#disabled-radio-btn').click(function (e) {
if ($('#disabled-no').is(':checked')) {
$('#SSDI').hide();
}
else {
$('#SSDI').show();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="disabled-radio-btn">
<label class="btn btn-default">
<input type="radio" name="disabled" id="disabled-yes">Yes
</label>
<label class="btn btn-default">
<input type="radio" name="disabled" id="disabled-no">No
</label>
</div>
<div id="SSDI">SSDI THING</div>update: https://jsfiddle.net/7hrbcmnb/2/
use event delegation when declaring the click event
$(document).on('click', '#disabled-radio-btn', function (e) {});
Use the val() method with the checked attribute.
if($("#disabled-no:checked").val())
$('#disabled-radio-btn').click(function (e) {
if ($('#disabled-no:checked').val()) {
$('#SSDI').hide();
}
else {
$('#SSDI').show();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="disabled-radio-btn">
<label class="btn btn-default">
<input type="radio" name="disabled" id="disabled-yes">Yes
</label>
<label class="btn btn-default">
<input type="radio" name="disabled" id="disabled-no">No
</label>
</div>
<div id="SSDI">SSDI THING</div>