トグルJavaScriptを使用してブートストラップトグル要素（とアニメーションを表示）

Question

次のように私はブートストラップトグル要素を持っている：

<input id="neutralInd" type="checkbox" name="neutralSite" onchange="setEventSite('neutral')" data-toggle="toggle" data-on="Yes" data-off="No">

それをクリックすると、それははいとはありませんが切り替わります、とそれは他のもの（以下のコード）を実行するJavaScript関数を正常に実行します。ここで

は私が何をしたいです：

ページ上の他の場所にラジオボタンを選択すると、それはここではNoにブートストラップトグルを切り替えるJavaScriptを実行します私が持っているコードは、これまでのところです：

ラジオボタンの定義：

<div class="radio"> 
 
    <label><input type="radio" id="homeTeam<?php echo $row; ?>" name="homeTeam" onchange="setEventSite('team')"></label> 
 
</div>

のJavaScript機能コード：

function setEventSite(chosen) { 
 
    var neutralInd = document.getElementById("neutralInd"); // Toggle 
 
    var locationOverride = document.getElementById("locationOverride"); // Text field 
 
    var homeTeam = document.getElementsByName("homeTeam"); // Radio buttons 
 

 
    if (chosen == "neutral") { // Toggle was clicked (changed) 
 
    if (neutralInd.checked) { 
 
     locationOverride.readOnly = false; 
 
     for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; } 
 
    } 
 
    else { 
 
     locationOverride.value = ""; 
 
     locationOverride.readOnly = true; 
 
    } 
 
    } else if (chosen == "team") // Radio button was selected 
 
    { 
 
    neutralInd.checked = false; 
 
    neutralInd.value="off"; 
 
    locationOverride.value = ""; 
 
    locationOverride.readOnly = true; 
 
    } 
 
}

私はラジオボタンを選択すると、それが正常に読み取り専用にテキストフィールドを設定しますが、ブートストラップトグル切り替えるように見えないことはありませんに切り替える必要がある場合（それがYesに設定されたまま）。 しかし、Toggleをもう一度クリックするとYesのままですが、JavaScriptがYesに設定されているかのようにJavaScriptが実行されます。だから私はラジオボタンを選択したときにトグルの値がになっていると思うのですが、トグルはNoに表示/アニメーション化されていません。だから、トグルはNoに切り替えるアニメーションを表示する

ありがとう！

Answer 1

いい友達の助けを借りてそれを見つけました。

ラジオボタンが選択されたときにトグルの親要素に "off"クラスを追加する必要がありました。だから私は、関数に2行を追加する必要がありました、そして、必要に応じてそれが動作：

var parentInd = $("#neutralInd").parent(); 
 
parentInd.addClass("off");

だからここに結果の関数のコードです：

function setEventSite(chosen) { 
 
     var neutralInd = document.getElementById("neutralInd"); 
 
     var locationOverride = document.getElementById("locationOverride"); 
 
     var homeTeam = document.getElementsByName("homeTeam"); 
 
     var parentInd = $("#neutralInd").parent(); 
 

 
     if (chosen == "neutral") { 
 
     if (neutralInd.checked) { 
 
      locationOverride.readOnly = false; 
 
      for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; } 
 
     } 
 
     else { 
 
      locationOverride.value = ""; 
 
      locationOverride.readOnly = true; 
 
     } 
 
     } else if (chosen == "team") 
 
     { 
 
     neutralInd.checked = false; 
 
     neutralInd.value="off"; 
 
     parentInd.addClass("off"); 
 
     locationOverride.value = ""; 
 
     locationOverride.readOnly = true; 
 
     } 
 
    }