具有多个相同输入的引导切换不起作用答案

【问题标题】：bootstrap toggle with multiple same input not working具有多个相同输入的引导切换不起作用
【发布时间】：2018-10-23 14:08:41
【问题描述】：

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

我变小了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');
      });
    }
  })
});

有什么建议可以做到这一点吗？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap-3

【解决方案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"
>

【讨论】：

我一直反对开启和关闭事件绑定，但这只是个人喜好，而不是任何技术原因。这个答案同样好，OP应该考虑。
不错！它正在工作.. ;) 很有趣，为什么当我使用$(document).on('change', '.testClass', toggleButtons); 时我得到compiled_part_1.js:3 Uncaught TypeError: ((n.event.special[g.origType] || {}).handle || g.handler).apply is not a function 但使用$(document).ready(func.....) 时一切正常？ :O
@Scorpioniz 我认为这与传播有关。看看stackoverflow.com/questions/31876769/…

【解决方案2】：

看起来该代码导致了无限循环，我不熟悉该插件，但这里有一个解决方法。如果我了解您希望在更改一个切换时将所有切换设置为相同状态的目标。

$(document).ready(function(){
  $('.toggle-group').on('click', function(e) {
    // wait for the plugin to update the actual checkbox
    setTimeout(function(){
        // check if the checkbox is checked or not  
        var state = ( $(e.currentTarget).prev('input')[0].checked ) ?
        'on' : 'off';

      // update all the bootstrapToggle checkbox instances with the new 
      // state
      $('.testClass').each(function(key, val) {
        $(val).bootstrapToggle(state);
      });

    }, 50);
  });
});

我认为正在发生的事情是在您的代码中，“更改”事件不断在循环中重新触发。这个答案远不是一个优雅的解决方案，而是突出了这个问题。 setTimeout 是为了让插件在测试之前更新复选框，因为它看起来不像 bootstrapToggle 接受任何回调。

【讨论】：

【解决方案3】：

只需从代码中删除 $('.testClass').each(function(key, val) {

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

【讨论】：