當sweetalert彈出消息顯示時如何使復選框值不改變

Question

我有一個具有基本值的復選框。 我想讓用戶可以通過單擊復選框中的選項來更改值，然后顯示警報消息以確保他們想要更改它。 如果是，則復選框值正在更改，但如果不是，則復選框值不會更改。

我嘗試使用sweetalert插件構建它。 現在的問題是，當用戶單擊復選框值更改值，然后顯示sweetalert彈出窗口時，復選框值已經更改。 所以我需要重新加載頁面，即使用戶在sweetalert模式中沒有點擊no選項。

如何僅在用戶單擊sweetalert模式中的“ yes ”選項后才更改checkbox值？

這是現在的視圖代碼

<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