En JavaScript, nous rencontrons souvent des pages Web ou des formulaires ayant certaines exigences pour remplir un formulaire. Par exemple, il est nécessaire de remplir un certain champ de saisie avec un nombre spécifique de caractères. Dans de tels cas, la fonctionnalité de désactivation d'un bouton en JavaScript en fonction de l'état est très utile pour garantir l'exactitude et les réglementations des données d'un élément spécifique des données.

Ce blog guidera la désactivation d'un bouton en JavaScript conditionnellement.

Comment désactiver un bouton en javascript en fonction de l'état?

Pour désactiver un bouton en JavaScript en fonction de l'état, les approches suivantes peuvent être utilisées:

• "désactivé«Propriété avec«longueur" propriété
• "comprend ()" et "document.getElementByid ()«Méthodes

Passer par les méthodes discutées une par une!

Méthode 1: Désactivez un bouton en JavaScript en fonction de l'état en utilisant les propriétés «désactivées» et «longueur»

Le "désactivé«La propriété indique si le contrôle est désactivé, et si oui, il n'accepte pas les clics et le«longueur»La propriété spécifie la longueur d'une chaîne. Ces propriétés seront utilisées pour désactiver un bouton à l'état. Par exemple, une longueur spécifique de caractères est entrée dans le champ de saisie.

Présentation l'exemple suivant pour comprendre le concept déclaré.

Exemple

Tout d'abord, incluez un type d'entrée nommé «texte»Et une valeur d'espace réservé. Ensuite, ajoutez un bouton une rubrique dans la div créée:

Montrer

Bouton désactiver

Passez au fichier JavaScript et récupérez les éléments spécifiés à l'aide du «document.QuerySelector ()" méthode:

Let Button = document.queySelector ('bouton');
Soit l'entrée = document.queySelector ('entrée');
Laissez la sortie = documenter.queySelector ('H1');

Après cela, incluez un auditeur d'événements nommé «Cliquez sur”Et attachez-le au bouton spécifié, qui remplira la valeur du champ de saisie lorsque le bouton est cliqué:

bouton.addEventListener ('click', () =>
sortir.InnerText = entrée.valeur;
);

De même, un événement nommé «Keyup"Sera attaché au champ de saisie, ce qui déclenchera la fonction donnée de manière à ce que la longueur de la valeur du champ de saisie devienne supérieure à"5», Le bouton sera désactivé:

saisir.addEventListener ('keyup', () =>
si (entrée.valeur.longueur> 5)
bouton.handicapé = vrai

autre
bouton.désactivé = false;

);

Sortir

Méthode 2: Désactivez un bouton en JavaScript en fonction d'une condition particulière en utilisant «include ()» et document.Méthodes GetElementById ()

Le "getElementByid ()»La méthode accède à un élément avec une valeur spécifiée dans son argument, et le«comprend ()»La méthode renvoie true si une chaîne particulière contient une valeur de chaîne spécifiée. Ces méthodes peuvent être appliquées pour récupérer l'ID d'entrée et placer une condition sur un caractère spécifié dans le champ de saisie.

Syntaxe

document.GetElementByid (EleMedId)

Ici, "élémentID»Fait référence à l'ID spécifique d'un élément HTML.

Comprend (SearchValue)

Dans la syntaxe ci-dessus, "calendrier de recherche»Fait référence à la valeur qui doit être recherchée.

L'exemple suivant démontre le concept déclaré.

Exemple

Tout d'abord, incluez un type d'entrée nommé «texte" Et un "onkeyup”Événement accédant à la fonction nommée"Disablebutton (ceci)" où "ce«Dans son argument, fait référence à un objet:

De même, incluez un type d'entrée nommé «soumettre”Avec une valeur désactivée comme suit:

Maintenant, déclarez une fonction nommée «DisableButton (TXT)" où "SMS"Fait référence à l'objet. Remplissez l'élément de type d'entrée à l'aide du document.Méthode GetElementById (). Enfin, appliquez une condition pour désactiver le bouton en spécifiant un caractère particulier "!" en utilisant le "comprend ()" méthode. Cela fonctionnera de telle manière que si le caractère spécifié est détecté dans le champ de saisie, le bouton sera désactivé:

FunctionDisableButton (txt)
var bt = document.getElementById («soumettre»);
Si (désactiver.valeur.Comprend ('!'))
bt.handicapé = vrai

else bt.désactivé = false;

Sortir

Nous avons offert les méthodes les plus simples pour désactiver un bouton en JavaScript.

Conclusion

Pour désactiver un bouton en JavaScript en fonction de l'état, utilisez le «désactivé»Propriété avec le«longueur”Propriété, qui appliquera la fonctionnalité basée sur la longueur des caractères d'entrée, ou le"comprend ()"Méthode avec"document.getElementByid ()”Méthode pour accéder au champ de saisie et appliquer une condition sur le caractère spécifié dans le champ de saisie. Ce manuel a fourni la procédure pour désactiver un bouton en JavaScript en fonction de la condition ajoutée.