jQuery click events in Bootstrap Button plugin

Question

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();
    }
});

indubitablee · Accepted Answer · 2017-04-13 14:10:58Z

2

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) {});

edited Apr 13, 2017 at 14:10

answered Apr 13, 2017 at 13:49

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rory McCrossan Over a year ago

Also note that you can reduce the if statement to just $('#SSDI.toggle(!$('#disabled-no').is(':checked'));

noclist Over a year ago

@indubitablee Thanks, however this isn't my issue. Somehow Bootstrap is effecting my click events. On first click, both radio buttons are evaluating to false. See fiddle here: jsfiddle.net/7hrbcmnb

indubitablee Over a year ago

@noclist, i updated my answer with the scenario in your jsfiddle

noclist Over a year ago

@indubitablee perfect, thank you. so, we need event delegation here because the bootstrap plugin script is in a different scope than my own, correct?

indubitablee Over a year ago

@noclist yup, thats what i think. also note Rory's above comment if you want to simplify the if statement. his suggestion is quite elegant.

phadaphunk · Accepted Answer · 2017-04-13 13:47:35Z

1

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>

answered Apr 13, 2017 at 13:47

phadaphunk

13.4k17 gold badges77 silver badges109 bronze badges

1 Comment

noclist Over a year ago

Thank you, the issue I'm having is different. See fiddle here: jsfiddle.net/7hrbcmnb The bootstrap button plugin is effecting my initial click.

Collectives™ on Stack Overflow

jQuery click events in Bootstrap Button plugin

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related