Bagaimana untuk Mengekalkan Konsistensi Kotak Semak dan Kotak Teks Semasa Mengendalikan Pengesahan Pengguna?

Perubahan Kotak Semak jQuery dan Penyelarasan Klik

Dalam senario di mana keadaan kotak pilihan dikemas kini secara dinamik melalui peristiwa, adalah penting untuk memastikan konsistensi antara keadaan kotak semak dan nilai kotak teks yang dipautkan. Ini menjadi sangat penting apabila kotak pilihan diklik untuk menogol keadaannya.

Pertimbangkan kod jQuery berikut:

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});

Di sini, acara .change() mengemas kini nilai kotak teks berdasarkan keadaan kotak semak dan peristiwa .click() menggesa pengesahan untuk menyahtanda kotak pilihan. Walau bagaimanapun, pendekatan ini memperkenalkan ketidakkonsistenan. Apabila pengguna membatalkan (memilih Tidak) semasa gesaan pengesahan, kotak semak kekal tidak ditanda. Walau bagaimanapun, memandangkan peristiwa change() dicetuskan sebelum pengesahan, nilai kotak teks dikemas kini kepada palsu, menunjukkan keadaan nyahtanda semasa kotak pilihan masih ditandakan.

Untuk menyelesaikan isu ini, kami perlu mengubah suai skrip kepada mengendalikan pembatalan dengan betul. Satu pendekatan ialah:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Versi yang dikemas kini ini memperkenalkan semakan bersyarat untuk mengesahkan sama ada kotak pilihan perlu ditanda. Jika pengesahan dibatalkan, kaedah prop() digunakan untuk memulihkan keadaan kotak semak yang ditandai. Nilai kotak teks kemudiannya dikemas kini berdasarkan keadaan sebenar kotak pilihan, memastikan ketekalan antara keadaan kotak semak dan nilai kotak teks yang dipautkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Konsistensi Kotak Semak dan Kotak Teks Semasa Mengendalikan Pengesahan Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!