javascript - 在复选框状态更改时防止 Javascript confirm()

Question

我有一个复选框(它使用 Bootstrap Switch 库充当开/关切换)以在 AJAX 的帮助下激活和停用用户。

当用户取消选中该框时，将触发此功能:

$('.user-status-ckbx').on('switchChange.bootstrapSwitch'...

弹出 confirm() 对话框，询问用户是否确定要停用/激活用户。如果用户点击“否”，按钮将返回到其原始状态，使用:

$("#" + e.currentTarget.id).bootstrapSwitch('toggleState');

我遇到的问题是每次运行 toggleState() 时，switchChange.bootstrapSwitch 也会再次运行。这会发送一条无休止的 confirm() 消息，该消息仅在用户确认消息后才会消失。

是否有一种有效的方法来防止 switchChange.bootstrapSwitch 方法基于真实用户点击而不是通过编程生成的切换来运行？

我已经试过了:

e.originalEvent !== undefined

和

e.which

正如其他类似问题中所建议的那样，但这些都不起作用，甚至它们也没有出现在“e”对象中......

<script>  
    $(".user-status-ckbx").bootstrapSwitch('size', 'mini');
    $(".user-status-ckbx").bootstrapSwitch('onText', 'I');
    $(".user-status-ckbx").bootstrapSwitch('offText', 'O');

    //ajax to activate/deactivate user
    $('.user-status-ckbx').on('switchChange.bootstrapSwitch', function(e){

        var currentDiv = $("#" + e.currentTarget.id).bootstrapSwitch('state');
        if( currentDiv == false){
          var confirmed = confirm("Are you sure you wish to deactivate this user? They will no longer be able to access any forms.");
          if(confirmed == true){
            changeActivationStatus($(this).val());
          } else {
            $("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
          }
        } else {
          var confirmed = confirm("Are you sure you wish to activate this user? Deactivated users which were previously active will have the same permissions prior to their de-activation unless changed manually.");
          if(confirmed == true){
            changeActivationStatus($(this).val());
          } else {
            $("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
          }
        }
    });

    function changeActivationStatus(userId){
      $.post("{{ path('isactive') }}", {userId: userId})
          .done(function(data){
            console.log("Finished updating " + userId);
          })
          .fail(function(){
            console.log("User could not be updated");
          });
    };
 </script>

Answer 1

有一种方法可以在以编程方式切换时阻止该事件。

您必须向 Bootstrap 开关添加选项:

var options = {
        onSwitchChange: function (event, state) {
            // Return false to prevent the toggle from switching.
            return false;
        }
    };
$(".user-status-ckbx").bootstrapSwitch(options);

当以编程方式切换按钮时，您必须添加第二个参数:

$("#" + e.currentTarget.id).bootstrapSwitch('toggleState', true);

JSFiddle:https://jsfiddle.net/Ravvy/npz8j3pb/