BootstrapToggle如何防止更改事件

Question

我使用jQuery在我的web应用程序插件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

在复选框中添加点击处理程序，在那里检查并在event上致电preventDefault。这将防止检查它并触发更改事件的复选框发生的默认操作。

<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我们现在在事件目标和添加点击处理程序的复选框，这样的事情

<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=".."属性stopImmediatePropagation()以防止引发BootstrapToggle默认事件。