How to change checkbox property checked to true or false within sweet alert

Question

I'm looking to use sweet alert to confirm when an user click on a checkbox, it displays a message asking for confirmation. but i want to the checkbox go back to the unchecked status (prop("checked", false)) if the user click to cancel the operation.

I tried to create a function inside the swal, and after the if/else function, but I couldn't discover how to make swal return something neither make it execute a function when the button cancel is clicked. I'm facing problems to find the checkbox inside the swal object too.

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>

When I try to create a function like

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

inside the swal or inside the if/else it always execute before the button being pressed.

Answer 1

you could try to reference this

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

and after the cancel button click you unchecked the checkbox

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

You're using swal2 plugin, not original swal

HTML was introduced here before it was in swal and there's a difference in usage. Instead of

text: "", html: true you shoud use

html: "",