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默認事件。