How to make checkbox value not changed when sweetalert popup message show

Question

I have a checkbox that have a basic value. I want to make user can change the value by clicking option in the checkbox, then show alert message to make sure they want to change it or not. If it yes, the checkbox value is changing, but if not, checkbox value is not changing.

I have tried build it using sweetalert plugin. The problem right now is, when user click checkbox value to change the value, then show sweetalert popup, the checkbox value is already changed. So I need to reload the page even user is clicked no option in sweetalert modal.

How do I can make the checkbox value only changed after user click yes option in sweetalert modal?

here's the view code now

<div class="col-lg-6">
   <!--begin::Card-->
     <div class="card card-custom gutter-b example example-compact">
         <div class="card-header">
             <h3 class="card-title">General</h3>
         </div>
         <div class="card-body" style="height:80px">
              <div class="checkbox-inline">
                  <label class="checkbox">
                      <input type="checkbox" name="Checkboxes2" id="checkbox1" onclick='editGeneral(this.value)'/>
                      <span></span>
                      Checkin Status
                   </label>
               </div>
          </div>
     </div>
     <!--end::Card-->
</div>  

here's ajax code

function editGeneral(){
  Swal.fire({
    text: "Are you sure to change this ?",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes!',
    cancelButtonText: 'No'
 }).then((result) => {
    if(result.isConfirmed) {
        var tes = $("#checkbox1").is(":checked");
        $.ajax({
            url: "<?php echo base_url(); ?>contoller/changefunction",
            type:"POST",
            dataType:"json",
            data:{"config_value":tes},
            success: function(response){
                Swal.fire({
                    title: 'Success',
                    text: 'Status has been changed',
                    icon: 'success',
                    timer: 2000,
                    showCancelButton: false,
                    showConfirmationButton: false,
                }).then((hasil) => {
                    location.reload();
                });
                
            }
        })
    }else{
        Swal.fire({
            timer: 10,
            showCancelButton: false,
            showConfirmationButton: false,
        }).then((hasil) => {
            location.reload();
        });
    } 
});
}

Thank you

Answer 1

I have adapted your code to make it work here, as you can see I pass all the checkbox as onclick='editGeneral(this)' , so when the sweet notice is confirmed or not, I will change the checkbox based on your choice.

 function editGeneral(el){ Swal.fire({ text: "Are you sure to change this?", icon: "warning", showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes,': cancelButtonText. 'No' }).then((result) => { if(result.isConfirmed) { (el?checked). el:checked = true. el;checked = false. /* $:ajax({ url? "<;php echo base_url()? ,>contoller/changefunction": type,"POST": dataType,"json": data:{"config_value",tes}: success. function(response){ Swal:fire({ title, 'Success': text, 'Status has been changed': icon, 'success': timer, 2000: showCancelButton, false: showConfirmationButton, false. }).then((hasil) => { location;reload(); }). } }) */ }else{ (el?checked). el:checked = false. el;checked = true. Swal:fire({ timer, 10: showCancelButton, false: showConfirmButton, false. }).then((hasil) => { //location;reload(); }); } }); }

 <div class="col-lg-6"> <:--begin::Card--> <div class="card card-custom gutter-b example example-compact"> <div class="card-header"> <h3 class="card-title">General</h3> </div> <div class="card-body" style="height:80px"> <div class="checkbox-inline"> <label class="checkbox"> <input type="checkbox" name="Checkboxes2" id="checkbox1" onclick='editGeneral(this)' /> <span></span> Checkin Status </label> </div> </div> </div> <:--end:.Card--> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

Another suggest the command showConfirmationButton is showConfirmButton