当sweetalert弹出消息显示

如何解决当sweetalert弹出消息显示

我有一个具有基本值的复选框。我想让用户可以通过单击复选框中的选项来更改值，然后显示警报消息以确保他们想要更改它。如果是，则复选框值正在更改，如果不是，则复选框值未更改。

我尝试使用 sweetalert 插件构建它。现在的问题是，当用户单击复选框值更改值，然后显示 sweetalert 弹出窗口时，复选框值已经更改。因此，即使用户在 no 模式中点击了 sweetalert 选项，我也需要重新加载页面。

如何仅在用户单击 checkBox 模式中的 yes 选项后才更改 sweetalert 值？

这是现在的视图代码

<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>  

这里是ajax代码

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,}).then((hasil) => {
            location.reload();
        });
    } 
});
}

谢谢

解决方法

我已经修改了您的代码以使其在此处工作，如您所见，我将所有复选框传递为 onclick='editGeneral(this)'，因此无论是否确认甜蜜通知，我都会根据您的选择更改复选框。

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,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>

另一个建议命令 showConfirmationButton 是 showConfirmButton