Question

我有一个Bootstrap Toggle元素如下：

＆＃13;

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

＆＃13;

单击它后，它将在Yes和No之间切换，并成功执行执行其他操作的JavaScript函数（下面的代码）。

这是我想做的事情：

在页面上的其他位置选择单选按钮后，它将执行JavaScript以将Bootstrap切换切换为否。这是我到目前为止的代码：

定义单选按钮：

＆＃13;

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

＆＃13;

JavaScript函数代码：

＆＃13;

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

＆＃13;

当我选择单选按钮时，它成功将Text字段设置为Readonly，但Bootstrap Toggle似乎没有切换（当它应切换为No时，它仍然设置为Yes）。但是，当我再次单击Toggle时，它会保持为Yes，但执行JavaScript就好像它被设置为Yes一样。因此，当我选择一个单选按钮时，我认为Toggle 的值成功设置为No，但Toggle不会显示/动画切换为No。 所以也许我想问如何让Toggle显示切换到No的动画。

谢谢！

Answer 1

在好朋友的帮助下计算出来。

当选择单选按钮时，我需要将“off”类添加到Toggle的父元素。所以我不得不在函数中添加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;
      }
    }

使用JavaScript切换Bootstrap Toggle元素（并显示动画）

1 个答案: