Comment désactiver ou activer les boutons en utilisant JavaScript et JQuery

Avez-vous déjà remarqué la fréquence? Cette logique est implémentée en déterminant l'état du bouton (activé ou désactivé) selon que le champ de saisie est rempli ou non, puis effectuer l'opération requise. Si vous ne savez pas comment effectuer cela? Pas de soucis!

Ce manuel expliquera la méthode d'activation et de désactivation des boutons à l'aide de JavaScript et JQuery.

Comment désactiver ou activer les boutons en utilisant JavaScript et JQuery?

L'une des choses les plus pratiques que chaque application Web comprend dans ses boutons est les fonctionnalités habilitantes et invalidantes. Vous pouvez utiliser le "désactivé”Attribut pour activer ou désactiver les boutons en jQuery et JavaScript.

Exemple 1: Désactiver ou activer les boutons à l'aide de JavaScript
Dans le fichier HTML, nous allons d'abord créer trois boutons, le bouton où les actions seront effectuées, l'une est pour la désactivation et l'autre pour activer le bouton:

Bouton
Cliquez pour désactiver
Cliquez pour activer

Nous définirons la fonction "DisableButton ()«Pour désactiver le bouton en définissant la valeur de l'attribut désactivé à«vrai»:

fonction DisableButton ()
document.getElementByid ("bouton").désactivé = true;

Pour activer le bouton, définissez la valeur de la propriété désactivée sur "FAUX»:

function enablebutton ()
document.getElementByid ("bouton").désactivé = false;

La sortie correspondante est la suivante:

Exemple 2: Désactiver ou activer les boutons en utilisant jQuery
Dans cet exemple, nous utiliserons jQuery pour désactiver et activer le bouton. Pour ce faire, créez d'abord deux boutons dans un fichier HTML. L'un d'eux est utilisé pour désactiver et activer l'autre bouton:

Bouton
Cliquez ici pour désactiver et pour activer le double clic dessus

Pour utiliser jQuery, spécifiez-le le «SRC”Attribut dans TAG:

Dans la balise, désactivez le bouton en un seul clic en déclenchant le "Cliquez sur"Événement dans le bouton avec ID"basculer»Et définissez la valeur du«désactivé«Attribut du premier bouton à«vrai". De même, sur le «dblclick”Event, définissez la valeur de l'attribut désactivé à"FAUX«Pour permettre le«Bouton"Sur double clic:

$ (document).ready (function ()
$ ('# toggle').on ('click', function ()
$ ('# bouton').Prop ('Disabled', true);
);
$ ('# toggle').on ('dblclick', function ()
$ ('# bouton').Prop ('Disabled', false);
);
);

La sortie signifie que nous désactivons et activons le bouton avec succès à l'aide de jQuery:

Exemple 3: activer le bouton désactivé à l'aide de JavaScript
Maintenant, nous allons activer le bouton désactivé après avoir entré du texte dans le champ de texte à l'aide de JavaScript. Pour cela, créez un champ de saisie et un bouton de soumission avec IDS "texte" et "soumettre". Le bouton Soumettre est désactivé par défaut en utilisant l'attribut désactivé:

Dans le fichier JavaScript, nous obtiendrons d'abord les ID du champ de saisie et du bouton, puis appellerons la fonction "maintien de l'État" dans "addEventListener«Méthode, où nous définirons la valeur de l'attribut désactivé à«FAUX«Si le champ de texte est vide, ce qui indique le bouton de désactivation; Sinon, nous le définirons comme «vrai», Si le champ de saisie est rempli de texte et que le bouton Soumettre sera activé:

Soit l'entrée = document.queySelector ("# text");
Let Button = document.queySelector ("# soumi");
saisir.AddeventListener ("Change", StateHandle);
fonction stateHandle ()
si (documenter.queySelector ("# text").valeur != "")
bouton.désactivé = false;

autre
bouton.désactivé = true;

Sortir

Exemple 4: Activez les boutons de bouton désactivé à l'aide de jQuery
Dans cet exemple, nous utiliserons jQuery pour activer le bouton de soumission désactivé. Pour ce faire, définissez d'abord la valeur de l'attribut désactivé à «FAUX”Pour désactiver le bouton pendant que le champ de saisie est vide. Ensuite, si le champ est rempli de texte, définissez la valeur de l'attribut désactivé à «vrai», Qui permet le bouton Soumettre:

$ (document).ready (function ()
$ ('# Text').on ('entrée change', function ()
if ($ (ceci).val () != ")
$ ('# soumettre').Prop ('Disabled', false);

autre
$ ('# soumettre').Prop ('Disabled', true);

);
);

La sortie correspondante est indiquée ci-dessous:

Nous avons couvert tous les aspects du bouton d'activation et de désactivation en utilisant JavaScript et JQuery.

Conclusion

Pour activer et désactiver le bouton en javascript et jQuery, vous pouvez utiliser le "désactivé" propriété. Pour ce faire, définissez la valeur de l'attribut désactivé "vrai" ou "FAUX«Pour désactiver ou activer le bouton, respectivement. Dans ce manuel, nous avons expliqué la méthode d'activation et de désactivation des boutons à l'aide de JavaScript et JQuery.