BootstrapToggle如何防止更改事件

Question

我在我的网络应用程序中使用jquery插件bootstrapToggle，在这里遇到一个问题，我的代码如下所示

<input id="toggle-event" type="checkbox" data-toggle="toggle">
<script>
  $(function() {
    $('#toggle-event').change(function() {
       if (some condition) {
                 $('#console-event').bootstrapToggle('toggle');
       }
    })
  })
</script>

基本上我想做的是当有人点击复选框时，我会做一些检查，如果条件失败，我会切换复选框将其设置回来。

这里的问题是在检查失败后，复选框切换回来，它再次触发更改事件，然后陷入死循环，有没有办法防止更改事件在条件失败时触发？感谢。

Answer 1

在复选框中添加点击处理程序，在那里办理登机手续，然后在preventDefault上拨打event。这将阻止在复选框上发生默认操作，该复选框正在检查并触发更改事件。

<input id="toggle-event" type="checkbox" data-toggle="toggle">
<script>
  $(function() {
    $('#toggle-event').on("click", function(e) {
       if (some condition) {
          e.preventDefault();
       }
    }).change(function() {
       $('#console-event').bootstrapToggle('toggle');
   })
</script>

修改

对于BootstrapToggle插件，它会使用一些花哨的DIV替换标准html复选框，以使其看起来很漂亮。

要做到这一点，你需要在相邻的DIV上添加一个点击处理程序到这个复选框，就像这样

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-style="testtoggle">
$(document).on('click.bs.toggle', 'div.testtoggle', function(e) {
    e.stopImmediatePropagation()
    var $checkbox = $(this).sibling('input[type=checkbox]')
    if (some condition) {
            $checkbox.bootstrapToggle('toggle')
    }
})

请注意我们目前在事件中定位的data-style=".."上的input属性和stopImmediatePropagation()，以防止触发BootstrapToggle默认事件。