Question

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');

我已经阅读了更多问题答案，但没有一个有效。按钮切换不起作用，我尝试添加/删除＆＃34;活动＆＃34;上课，没有效果。我使用1.10 jQuery和3.1 Bootstrap。这应该很简单，我把头发拉出来了！

Answer 1

需要使用类button() ...

在元素上调用

btn

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

这将正确切换按钮并正确更新每个输入的已检查属性...

Fiddle

Answer 2

疯狂的bootstrap docs（3.2）并没有让这更加明显，但这是我发现在代码中设置单选按钮初始状态的最简单方法。

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

在阅读了关于这个主题的几十篇文章之后，似乎这些是一般的混淆点：

＆＃39;切换＆＃39;方法不会像人们预期的那样在状态之间切换（关闭 - 打开 - >关闭），而只是将引用的按钮设置为＆＃34; on＆＃34;并关闭所有其他按钮＆＃34;关闭＆＃34;。
引用的ID必须位于＆＃39;标签上？而不是＆＃39;输入＆＃39;。

Answer 3

http://jsfiddle.net/y5qccerz/

document.querySelector(".btn-group input[id='optionTrue']").checked = true;

如何以编程方式检查Bootstrap按钮组（收音机）按钮

3 个答案: