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

Question

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

我已经尝试使用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,
            showCancelButton: false,
            showConfirmationButton: false,
        }).then((hasil) => {
            location.reload();
        });
    } 
});
}

谢谢

标签： javascriptjquerycodeignitersweetalert2

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