如何在jQuery中取消conformation上的变更事件？

Question

我是Gajarthan，我是jQuery的新手。如果用户未确认，我会尝试防止更改复选框。但当我第一次点击时它就不起作用了。点击第二次后，它正常工作。

这是我功能的总结

当我单击切换按钮时，它需要显示一个确认警报“你确定要继续吗？”如果我点击“是”。如果toggle inactive（非活动），则需要更改Active（活动）。如果toggle active，则需要更改inactive。如果我点击“否”。切换不会改变！

null

  $(document).ready(function(){
            $('.toggle-class').change(function() {
                var value =  $(this).prop('checked');
                var proceed = confirm("Are you sure you want to proceed?");
                if (proceed) {
                    console.log(value);
                }
                else{
                    $(this).prop('checked' ,!value);
                }

            })
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">


<input class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" >

null

Answer 1

相关问题

Answer 2

按钮的活动类和非活动类使用

标记，并使用 toggle btn...类，该类由引导程序呈现。

要控制此按钮的状态，需要使用closest()方法引用此div，随后为活动按钮分配BTN-success类，为非活动按钮分配BTN-danger off类。

null

$(document).ready(function () {
    $(".toggle-class").change(function () {
        var value = $(this).prop("checked");
        var proceed = confirm("Are you sure you want to proceed?");
        if (proceed) {
            $(this).closest(".toggle.btn").addClass("btn-success").removeClass("btn-danger off");
        } else {
            $(this).closest(".toggle.btn").addClass("btn-danger off").removeClass("btn-success");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet" />
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<input class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" />