javascript - 具有多个相同输入的 Bootstrap 切换不起作用

Question

具有多个相同输入的引导切换不起作用，除非按不是第一个输入..并且仍然不是所有输入都被选中/取消选中..

我做了小example

如果我按下其中一个，我需要确保所有其他人都具有相同的状态。

$(document).ready(function(){
  $('.testClass').on('change', function() {
    if($(this).prop('checked')) {
      $('.testClass').each(function(key, val) {
        $(val).bootstrapToggle('on');
      });
    } else {
      $('.testClass').each(function(key, val) {
        $(val).bootstrapToggle('off');
      });
    }
  })
});

有什么建议可以实现这一点吗？

Answer 1

@digital-pollution 只是让我无法解释，但我认为我找到了更好的解决方案。它基本上删除了开始时的 on('change') 事件，并在最后将其添加回来。

var toggleButtons = function toggleButtons() {
  $('.testClass').off('change');
  if($(this).prop('checked')) {
    $('.testClass').not($(this)).each(function(key, val) {
        $(val).bootstrapToggle('on');
      });
    } else {
      $('.testClass').not($(this)).each(function(key, val) {
        $(val).bootstrapToggle('off');
      });
    }
    $('.testClass').on('change', toggleButtons);
}

$(document).ready(function(){
  $('.testClass').on('change', toggleButtons);
});

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input type="checkbox"
       class="testClass"
       data-toggle="toggle"
       data-on="test"
       data-off="NOT"
>

<input type="checkbox"
       class="testClass"
       data-toggle="toggle"
       data-on="test"
       data-off="NOT"
>

<input type="checkbox"
       class="testClass"
       data-toggle="toggle"
       data-on="test"
       data-off="NOT"
>