如何在 sweet alert 中将复选框 属性 更改为 true 或 false

Question

我希望使用 sweet alert 来确认当用户单击复选框时，它会显示一条消息要求确认。但如果用户单击取消操作，我希望复选框返回未选中状态 (prop("checked", false))。

我试图在 swal 内部和 if/else 函数之后创建一个函数，但我无法发现如何使 swal return 既不使它在按钮时执行函数单击取消。我也遇到了在 swal 对象中找到复选框的问题。

HTML

<input class="accomplish" id="task-checkbox1" value="1" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-on="Acomplished" data-off="Not Acomplished">

<script>
        $("input.accomplish").change(function(){
            if ($(this).is(":checked")){
                var output = true;
                 swal({
                    title: 'Are you Sure?',
                    icon: 'warning',
                    buttons:{
                        cancel: {
                            visible: true,
                            text : 'Cancel',
                            className: 'btn btn-danger'
                        },
                        confirm: {
                            text : 'Accomplish Task',
                            className : 'btn btn-success'
                        }
                    }
                }).then((willDelete) => {
                    if (willDelete) {
                        swal("Task Accomplished Successfully", {
                            icon: "success",
                            timer: 1500,
                            buttons : {
                                confirm : {
                                    text: "Finish",
                                    className: 'btn btn-primary'
                                }
                            }
                        });
                    } else {
                        output = false;
                        swal("Ok, we finish this task later", {
                            icon: "info",
                            timer: 1500,
                            buttons : {
                                confirm : {
                                    text: "Dismiss",
                                    className: 'btn btn-primary'
                                }
                            }
                        });
                    }
                });
            } else {
                swal({
                    title: 'Trying to undone this task?',
                    icon: 'warning',
                    buttons:{
                        cancel: {
                            visible: true,
                            text : 'calcel',
                            className: 'btn btn-danger'
                        },
                        confirm: {
                            text : 'Undone Task',
                            className : 'btn btn-success '
                        }
                    }
                }).then((willDelete) => {
                    if (willDelete) {
                        swal("Task is pending again", {
                            icon: "success",
                            //timer: 1500,
                            buttons : {
                                confirm : {
                                    text: "Finish",
                                    className: 'btn btn-primary'
                                }
                            }
                        });
                    } else {
                        swal("This task keeps accomplished", {
                            icon: "info",
                            //timer: 1500,
                            buttons : {
                                confirm : {
                                    text: "Dismiss",
                                    className: 'btn btn-primary'
                                }
                            }
                        });
                    }
                });
            }
        });
        </script>

当我尝试创建类似

的函数时

$("#task-checkbox1").prop("checked", false);

在 swal 内部或 if/else 内部，它总是在按下按钮之前执行。

Answer 1

你可以尝试参考这个

$(document).ready(() => {
     $("input.accomplish").change(function(){
         const that = this // here a is change

点击取消按钮后取消选中复选框

else {
                      that.checked= false;// here is a change
                        output = false;
                        swal("Ok, we finish this task later", {
                            icon: "info",
                            timer: 1500,
                            buttons : {
                                confirm : {
                                    text: "Dismiss",
                                    className: 'btn btn-primary'
                                }
                            }
                        });
                    }

Answer 2

您使用的是 swal2 插件，而不是原始的 swal

HTML在swal之前就在这里介绍过，用法上有区别。而不是

正文：“”， html：正确 你应该使用

html: "",