Maison > interface Web > js tutoriel > Comment activer/désactiver dynamiquement un bouton de soumission dans jQuery ?

Comment activer/désactiver dynamiquement un bouton de soumission dans jQuery ?

Barbara Streisand
Libérer: 2024-11-10 17:42:03
original
272 Les gens l'ont consulté

How to Dynamically Enable/Disable a Submit Button in jQuery?

Désactivation et activation des boutons de soumission avec jQuery

Lorsque vous travaillez avec des formulaires, il est souvent souhaitable de désactiver le bouton de soumission jusqu'à ce que certaines conditions soient remplies. Dans ce cas, vous souhaitez désactiver le bouton de soumission lorsque le champ de texte est vide et l'activer lorsque le champ de texte contient une valeur.

Le code fourni ne fonctionne pas correctement car l'événement de changement n'est pas déclenché à chaque fois. fois qu’une touche est enfoncée. Au lieu de cela, l'événement keyup est recommandé pour ce scénario.

Voici une solution optimisée :

$(document).ready(function() {
    $(':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

Cette solution utilise l'événement keyup, qui capture les frappes au fur et à mesure qu'elles se produisent. Lorsque le champ de texte est vide (c'est-à-dire que la valeur est une chaîne vide), le bouton de soumission reste désactivé. Cependant, dès qu'un caractère est saisi, le bouton de soumission devient activé. Si le champ redevient vide, le bouton de soumission est à nouveau désactivé.

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal