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>

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

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

Answer 1

将点击处理程序添加到复选框，在那里进行签入并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插件，它用一些花哨的 s 替换了标准的 html 复选框，DIV使其看起来很漂亮。

因此，要执行此操作，您需要在复选框旁边添加一个单击处理程序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=".."属性以及防止 BootstrapToggle 默认事件触发的属性。inputstopImmediatePropagation()