当 sweetalert 弹出消息显示时如何使复选框值不更改

Question

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

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

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

现在是查看代码

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

谢谢

Answer 1

我已经修改了你的代码，让它在这里工作，正如你所看到的，我将所有复选框都传递为 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,
            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>

另一个建议命令 showConfirmationButton 是 showConfirmButton

当 sweetalert 弹出消息显示时如何使复选框值不更改

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

javascript

jquery

codeigniter

sweetalert2