<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!
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...
It's crazy the bootstrap docs (3.2) don't make this more obvious, but here's the simplest method I've found to set the initial state of radio buttons in code.
<div class="btn-group" data-toggle="buttons">
<label id="optionFalse" class="btn btn-primary">
<input type="radio" name="options" /> false
</label>
<label id="optionTrue" class="btn btn-primary ">
<input type="radio" name="options" /> true
</label>
</div>
if (initTrue) {
$('#optionTrue').button('toggle');
}
else {
$('#optionFalse').button('toggle');
}
After reading dozens of posts on this subject, it seems these are the general points of confusion:
document.querySelector(".btn-group input[id='optionTrue']").checked = true;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.