Maison  >  Article  >  interface Web  >  Comment désactiver et activer un bouton d'envoi basé sur la saisie d'un champ de texte dans jQuery ?

Comment désactiver et activer un bouton d'envoi basé sur la saisie d'un champ de texte dans jQuery ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-10 15:04:03967parcourir

How to Disable and Enable a Submit Button Based on Text Field Input in jQuery?

Désactivation et activation du bouton d'envoi dans jQuery en fonction de la saisie du champ de texte

Comprendre le problème :

Vous souhaitez contrôler l'état activé/désactivé d'un bouton de soumission en fonction du contenu d'un champ de texte. Le défi se pose lorsque le champ de texte redevient vide, nécessitant la désactivation du bouton d'envoi.

La solution :

Dans un premier temps, définissez l'attribut désactivé du bouton de soumission :

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

Ensuite, gérez l'événement keyup du champ de texte pour surveiller son contenu :

$('input[type="text"]').keyup(function() {
  var text = $(this).val();

  // If the text field is not empty, enable the submit button.
  if (text != '') {
    $(':input[type="submit"]').prop('disabled', false);
  }

  // If the text field becomes empty, disable the submit button.
  else {
    $(':input[type="submit"]').prop('disabled', true);
  }
});

Avec cette approche, vous pouvez désactiver et activer dynamiquement le bouton de soumission en fonction sur la présence d'une saisie dans le champ de texte.

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!

Déclaration:
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