Cet article illustre le but, le fonctionnement et l'utilisation de la propriété HTML DOM Input Checkbox 'disabled' en JavaScript.
Comment la propriété HTML DOM Input Checkbox 'disabled' fonctionne-t-elle en JavaScript ?
La case à cocher d'entrée ' désactivé ” dépend de l'attribut “case à cocher”. Cela fonctionne sur les formulaires HTML et les champs de saisie pour désactiver et désactiver les cases à cocher données.
Syntaxe (Définissez la propriété désactivée)
case à cocherObjet. désactivé = vrai | FAUXSelon la syntaxe de retour définie, la propriété 'disabled' prend en charge deux paramètres répertoriés comme suit :
- vrai: Cela signifie que la case à cocher correspondante est désactivée.
- faux (valeur par défaut) : Il s'agit d'une valeur facultative qui indique que la case à cocher associée n'est pas désactivée.
Retour (Renvoyer la propriété désactivée)
case à cocherObjet. désactivéDans la syntaxe ci-dessus, le ' case à cocherObjet ' correspond au HTML ' case à cocher ' élément.
Utilisons les syntaxes définies ci-dessus dans les exemples ci-dessous pour comprendre l'implémentation pratique de la propriété 'désactivé'.
Exemple 1 : application de la propriété Input Checkbox « disabled » Utilisation de la syntaxe de base
Dans le premier exemple, la « case à cocher » est ajoutée pour la désactiver en utilisant la syntaxe généralisée définie.
Code HTML
Tout d'abord, analysez le code HTML donné :
< style corporel = 'texte-aligner : centrer' >
< h2 > HTML Entrée DOM Case à cocher Propriété désactivée en JavaScript h2 >
Case à cocher : < type d'entrée = 'case à cocher' identifiant = 'démo' > Formulaire soumis < Br >< Br >
< p > La case à cocher indiquée est désactivée p >
Dans les lignes de code ci-dessus :
- Le '
” spécifie la section du corps qui est alignée sur le “ centre ' avec l'aide du ' style ' attribut. - Le ' ” définit le sous-titre du niveau 2.
- Le '
” crée une “case à cocher” en spécifiant le type d'entrée “ case à cocher « avoir un identifiant attribué » démo ”. - Le ' ” ajoute un élément de paragraphe pour afficher le résultat résultant.
Code Javascript
Ensuite, regardez le code JavaScript :
< scénario >document. getElementById ( 'démo' ) . désactivé = vrai ;
scénario >
Dans l'extrait de code ci-dessus, le ' document.getElementById() ' est appliquée pour récupérer la case à cocher en utilisant son identifiant 'demo' et la valeur de la propriété 'disabled' est définie sur ' vrai ” qui désactive la case à cocher.
Sortir
La sortie ci-dessus confirme que la case à cocher donnée est désactivée en raison du ' désactivé ' propriété définie sur ' vrai ”.
Exemple 2 : renvoi de la valeur de la propriété Input Checkbox « disabled »
Cet exemple applique la propriété « désactivé » pour renvoyer l'état de la case à cocher ciblée sous la forme d'une valeur booléenne (vrai/faux).
Code HTML
Considérez le code HTML suivant :
< style corporel = 'texte-aligner : centrer' >< h2 > HTML Entrée DOM Case à cocher Propriété désactivée en JavaScript h2 >
Case à cocher : < type d'entrée = 'case à cocher' désactivé = vrai identifiant = 'démo' > Formulaire soumis < Br >< Br >
< identifiant p = 'goûter' > p >
Dans le bloc de code ci-dessus :
- La case à cocher est attribuée et l'état du ' désactivé ' la propriété est définie sur ' vrai ”.
- Après cela, un vide ' ” est ajouté avec un identifiant “sample” attribué pour ajouter la sortie.
Code Javascript
Passons maintenant au code JavaScript :
< scénario >Il y a un = document. getElementById ( 'démo' ) . désactivé ;
document. getElementById ( 'goûter' ) . innerHTML = un ;
scénario >
Dans le code ci-dessus :
- La variables ' un ' utilise le ' document.getElementById() ” pour accéder à la case à cocher en utilisant son identifiant “demo” et associer le “ désactivé ” propriété pour vérifier si la case à cocher récupérée est désactivée ou non.
- La méthode 'document.getElementById()' appliquée à nouveau récupère le paragraphe vide inclus et affiche l'état de la propriété 'désactivée' sous forme de paragraphe.
Sortir
Comme analysé, le résultat renvoie le statut attribué à la 'case à cocher', c'est-à-dire ' vrai ”.
Exemple 3 : Désactiver et annuler la désactivation de la case à cocher à l'aide de la propriété « disabled » de la case à cocher d'entrée
En plus de définir et de renvoyer l'état de la case à cocher, la propriété 'désactivé' permet également aux utilisateurs de désactiver et de désactiver la case à cocher en même temps. Voyons cela concrètement.
Code HTML
Passons en revue le code HTML écrit :
< style corporel = 'texte-aligner : centrer' >< h2 > HTML Entrée DOM Case à cocher Propriété désactivée en JavaScript h2 >
Case à cocher : < type d'entrée = 'case à cocher' identifiant = 'démo' > Formulaire soumis saisir >< Br >< Br >
< bouton onclick = 'vérifierDésactiver()' > Décochez la case bouton >
< bouton onclick = 'checkUndisable()' > Décochez la case bouton >
Dans le bloc de code ci-dessus :
- De même, incluez une case à cocher et ajoutez un bouton ayant un ' sur clic ” événement qui exécute le “ checkDisable() ” fonction lors du clic sur le bouton.
- Après cela, le deuxième bouton est ajouté qui utilise également le gestionnaire d'événements 'onclick' pour l'exécution du ' checkUndisable() ” lorsque le bouton clique.
Code Javascript
Ensuite, passez par le code ci-dessous :
< scénario >contrôle de fonctionDésactiver ( ) {
document. getElementById ( 'démo' ) . désactivé = vrai ;
}
contrôle de fonctionUndisable ( ) {
document. getElementById ( 'démo' ) . désactivé = FAUX ;
}
scénario >
Dans les lignes de code ci-dessus :
- Définissez une fonction nommée ' checkDisable() » qui applique le « document.getElementById() ” pour approcher la case à cocher via son identifiant “demo” et définir sa valeur sur “true”.
- La deuxième fonction ' checkUndisable() » La fonction applique à nouveau la méthode « document.getElementById() » pour accéder à nouveau à la case à cocher et définir sa valeur sur « false » si l'utilisateur clique sur le deuxième bouton inclus nommé « Undisable the checkbox ».
Sortir
La sortie 'désactive' la case à cocher donnée lorsque l'utilisateur clique sur le premier bouton et la 'désactive' si l'utilisateur clique sur le deuxième bouton en conséquence.
Conclusion
En JavaScript, la case à cocher d'entrée HTML DOM ' désactivé ' La propriété aide les utilisateurs à définir et à renvoyer l'état coché de la 'case à cocher'. Il définit les syntaxes généralisées pour les processus « set » et « return ». Sa syntaxe d'ensemble fonctionne sur deux valeurs ' vrai ' et ' FAUX ”. En revanche, sa syntaxe de retour ne nécessite aucun paramètre. Cet article a démontré l'implémentation objective, fonctionnelle et pratique de la propriété HTML DOM Input Checkbox 'disabled' en JavaScript.