如何以編程方式檢查 Bootstrap 按鈕組（單選）按鈕

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

需要在具有類btn的元素上調用button() ...

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

這將正確切換按鈕並正確更新每個輸入的檢查屬性......

小提琴

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

在閱讀了關於這個主題的數十篇文章后，似乎這些是一般的混淆點：

• 'toggle ' 方法不會像人們預期的那樣在狀態（關閉->打開->關閉）之間切換，而是只是將引用的按鈕設置為“打開”並關閉所有其他按鈕。
• 引用的 id 需要在“標簽”而不是“輸入”上。

Answer 3

http://jsfiddle.net/y5qccerz/

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