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

在Checkbox状态更改上阻止Javascript confirm（）

2 个答案: