How to programmatically check a Bootstrap button group (radio) button

Csaba Toth picture Csaba Toth · Aug 31, 2014 · Viewed 11.1k times · Source

http://jsfiddle.net/rphpbqp9/

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-sm btn-primary success active">
        <input type="radio" name="options" id="optionFalse" checked />false
    </label>
    <label class="btn btn-sm btn-primary danger">
        <input type="radio" name="options" id="optionTrue" />true
    </label>
</div>

$('#optionTrue').button('toggle');

I've read more question answers, but none of them works. The button toggle doesn't work, I tried to add/remove "active" class, doesn't have an effect. I'm using 1.10 jQuery and 3.1 Bootstrap. This supposed to be simple, I'm pulling my hair out!

Answer

Anthony Chu picture Anthony Chu · Aug 31, 2014

button() needs to be called on the element with the class btn...

$('#optionTrue').closest('.btn').button('toggle');

This will toggle the buttons properly and update the checked properties of each input properly...

Fiddle