Comment activer/désactiver un bouton de soumission jQuery basé sur la saisie d'un champ de texte ?

Désactivation et activation d'un bouton de soumission jQuery basé sur la saisie d'un champ de texte

Dans un scénario où vous avez besoin d'un bouton de soumission qui est inactif lorsque le champ de texte correspondant est vide et devient actif une fois le texte saisi, les étapes suivantes fournissent une solution robuste :

1. Désactivez initialement le bouton Soumettre :

   $(document).ready(function() {
       $(':input[type="submit"]').prop('disabled', true);
   });

2. Surveiller les modifications du champ de texte à l'aide de l'événement keyup :

   $('input[type="text"]').keyup(function() {
       // Check if the text field is not empty
       if($(this).val() != '') {
           // Enable the submit button
           $(':input[type="submit"]').prop('disabled', false);
       } else {
           // Disable the submit button
           $(':input[type="submit"]').prop('disabled', true);
       }
   });

3. Événement Éviter le changement (facultatif) :
   L'événement de changement se déclenche lorsque le focus est éloigné du champ de saisie, ce qui n'est peut-être pas le comportement souhaité dans ce scénario. L'utilisation de keyup garantit plutôt la réactivité du bouton à la valeur saisie dès qu'une touche est relâchée, même si le focus reste sur le champ.

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!