Maison > interface Web > js tutoriel > Comment désactiver et activer les boutons de soumission avec jQuery en fonction de la valeur du champ de texte ?

Comment désactiver et activer les boutons de soumission avec jQuery en fonction de la valeur du champ de texte ?

Barbara Streisand
Libérer: 2024-11-06 21:57:02
original
421 Les gens l'ont consulté

How to Disable and Enable Submit Buttons with jQuery Based on Text Field Value?

Désactivation et activation des boutons de soumission avec jQuery

Afin de contrôler l'état activé/désactivé d'un bouton de soumission en fonction de la valeur d'un champ de texte, le jQuery suivant le code peut être implémenté :

$(document).ready(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> $(':input[type="submit"]').prop('disabled', true);
 $('input[type="text"]').keyup(function() {
    if($(this).val() != '') {
       $(':input[type="submit"]').prop('disabled', false);
    }
    else {
       $(':input[type="submit"]').prop('disabled', true);
    }
 });
Copier après la connexion

});

Ce code accomplit les tâches suivantes :

  • Désactive initialement le bouton d'envoi.
  • Écoute les événements keyup dans le champ de texte.
  • Lorsqu'une clé est relâchée dans le champ de texte, vérifie si sa valeur n'est pas vide.
  • Si le champ de texte n'est pas vide, active le bouton de soumission.
  • Si le champ de texte est vide, désactive le bouton de soumission.

Par conséquent, le bouton Soumettre reste désactivé jusqu'à ce que le champ de texte contienne une valeur. Une fois qu'une valeur est saisie, le bouton de soumission devient activé, permettant au formulaire d'être soumis. Si la valeur dans le champ de texte est supprimée par la suite, le bouton de soumission sera à nouveau désactivé, empêchant la soumission du formulaire.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal