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

このテーマに関する何十もの投稿を読んだ後、これらは一般的な混乱のポイントのようです:

• 「トグル」メソッドは、予想されるように状態 (オフ -> オン -> オフ) を切り替えませんが、参照されたボタンを「オン」に設定し、他のすべてのボタンを「オフ」にします。
• 参照される ID は、「入力」ではなく「ラベル」にある必要があります。

Answer 3

http://jsfiddle.net/y5qccerz/

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