在复选框状态更改时防止 Javascript 确认（）

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/

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');
        }
    }
});