Comment gérer les événements de changement de case à cocher et de clic dans jQuery sans comportement incohérent ?

Énigme des événements de changement et de clic de case à cocher jQuery

Les événements de changement et de clic jQuery peuvent parfois conduire à un comportement inattendu lorsque vous travaillez avec des cases à cocher. En particulier, lorsqu'un événement de changement se déclenche avant une fenêtre contextuelle de confirmation, cela peut entraîner une incohérence entre l'état de la case à cocher et le champ de texte associé.

Le problème

Considérez le code suivant :

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

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

Dans ce scénario, l'événement change met à jour la valeur du champ de texte en fonction de l'état de la case à cocher. Cependant, l'événement click affiche une fenêtre contextuelle de confirmation lorsque la case n'est pas cochée. Si l'utilisateur annule l'action, la case reste cochée, mais l'événement de changement a déjà été déclenché. Cela laisse le champ de texte avec une valeur incorrecte.

La solution

Pour résoudre ce problème, nous devons modifier le code pour déclencher la fenêtre contextuelle de confirmation avant le changement d'événement. Une approche consiste à utiliser la méthode prop() pour gérer par programme l'état coché :

$(document).ready(function() {
  $('#textbox1').val(this.checked);

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

Dans ce code mis à jour, l'événement change déclenche la fenêtre contextuelle de confirmation lorsque la case est cochée. Si l'utilisateur annule l'action, la méthode prop() restaure l'état de la case à cocher et empêche l'événement de changement de mettre à jour le champ de texte avec une valeur incorrecte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!