在复选框状态更改时阻止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

有一种方法可以在以编程方式切换时防止事件发生。

您必须向引导开关添加选项：

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/

Answer 2

$(".uid-toggle").change(function (event) {
    var option = confirm('Are you sure, you want to change status?');
    console.log(`$(this).prop('checked')`);
    if (option) {
    } else {
        if ($(this).prop('checked')) {
            $(this).prop('checked', !$(this).prop('checked'));                
            $(this).parent().removeClass('btn-primary off');
            $(this).parent().addClass('btn-danger off');
        } else {
            $(this).prop('checked', !$(this).prop('checked'));
            $(this).parent().addClass('btn-primary off');
            $(this).parent().removeClass('btn-danger off');
        }
    }
});