javascript - 如何以编程方式检查引导按钮组（单选）按钮

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

我已经阅读了更多的问题答案，但没有一个有效。按钮切换不起作用，我尝试添加/删除“活动”类，没有效果。我正在使用 1.10 jQuery 和 3.1 Bootstrap。这应该很简单，我正在拔头发！

Answer 1

button()需要在具有类的元素上调用btn...

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

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

小提琴

Answer 2

引导文档（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');
}

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

• 'toggle ' 方法不会像人们期望的那样在状态之间切换（off->on->off），而只是将引用的按钮设置为“on”并将所有其他按钮“off” 。
• 引用的 id 需要在“标签”而不是“输入”上。

Answer 3

http://jsfiddle.net/y5qccerz/

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