Aquest article il·lustra el propòsit, el funcionament i l'ús de la propietat 'desactivada' de la casella d'entrada d'HTML DOM a JavaScript.
Com funciona la propietat 'desactivada' de la casella d'entrada d'HTML DOM a JavaScript?
La casella de selecció d'entrada ' discapacitat La propietat depèn de l'atribut 'checkbox'. Funciona amb els formularis HTML i els camps d'entrada per desactivar i desactivar les caselles de selecció donades.
Sintaxi (defineix la propietat desactivada)
checkboxObject. discapacitat = veritat | falsSegons la sintaxi de retorn definida, la propietat 'disabled' admet dos paràmetres que s'enumeren a continuació:
- veritat: Significa que la casella de selecció corresponent està desactivada.
- fals (valor per defecte): És un valor opcional que indica que la casella de selecció associada no està desactivada.
Devolució (retorna la propietat desactivada)
checkboxObject. discapacitatEn la sintaxi anterior, el ' checkboxObject ' correspon a l'HTML ' casella de selecció ” element.
Utilitzem les sintaxis definides anteriorment als exemples següents per entendre la implementació pràctica de la propietat 'discapacitat'.
Exemple 1: aplicació de la propietat 'desactivada' de la casella de selecció d'entrada Ús de la sintaxi bàsica
En el primer exemple, s'afegeix la 'casilla de verificació' per desactivar-la mitjançant la sintaxi generalitzada definida.
Codi HTML
En primer lloc, analitzeu el codi HTML donat:
< estil corporal = 'text-align: centre' >
< h2 > HTML Entrada DOM casella de selecció Propietat desactivada en JavaScript h2 >
casella de selecció : < tipus d'entrada = 'casilla de verificació' id = 'demo' > Formulari enviat < br >< br >
< pàg > La casella de selecció donada està desactivada pàg >
A les línies de codi anteriors:
- El '
L'etiqueta ' especifica la secció del cos que està alineada amb el ' centre ' amb l'ajuda del ' estil ” atribut. - El ' L'etiqueta defineix el subtítol del nivell 2.
- El '
L'etiqueta ' crea una 'casilla de verificació' especificant el tipus d'entrada ' casella de selecció 'tenint un identificador assignat' demostració ”. - El ' ” afegeix un element de paràgraf per mostrar el resultat resultant.
Codi JavaScript
A continuació, mireu el codi JavaScript:
< guió >document. getElementById ( 'demo' ) . discapacitat = veritat ;
guió >
Al fragment de codi anterior, el ' document.getElementById() s'aplica el mètode per obtenir la casella de selecció amb el seu identificador 'demo' i el valor de la propietat 'disabled' s'estableix en ' veritat ” que desactiva la casella de selecció.
Sortida
La sortida anterior confirma que la casella de selecció donada està desactivada a causa del ' discapacitat ' propietat establerta a ' veritat ”.
Exemple 2: retorn de la casella de selecció d'entrada 'desactivada' del valor de la propietat
Aquest exemple aplica la propietat 'disabled' per tornar l'estat de la casella de selecció de destinació com a valor booleà (true/false).
Codi HTML
Considereu el codi HTML següent:
< estil corporal = 'text-align: centre' >< h2 > HTML Entrada DOM casella de selecció Propietat desactivada en JavaScript h2 >
casella de selecció : < tipus d'entrada = 'casilla de verificació' discapacitat = veritat id = 'demo' > Formulari enviat < br >< br >
< p id = 'mostra' > pàg >
Al bloc de codi anterior:
- S'assigna la casella de selecció i l'estat del ' discapacitat La propietat s'estableix en ' veritat ”.
- Després d'això, un' buit s'afegeix l'element amb un identificador assignat 'mostra' per afegir la sortida.
Codi JavaScript
Ara, passeu al codi JavaScript:
< guió >hi ha un = document. getElementById ( 'demo' ) . discapacitat ;
document. getElementById ( 'mostra' ) . innerHTML = a ;
guió >
En el codi anterior:
- La variable ' a ' utilitza el ' document.getElementById() ” per accedir a la casella de selecció mitjançant el seu identificador “demo” i associar el “ discapacitat ” per comprovar si la casella de selecció obtinguda està desactivada o no.
- El mètode 'document.getElementById()' aplicat de nou recupera el paràgraf buit inclòs i mostra l'estat de la propietat 'desactivada' com a paràgraf.
Sortida
Tal com s'ha analitzat, el resultat retorna l'estat d'assignació de la 'casella de verificació', és a dir, ' veritat ”.
Exemple 3: Desactiveu i desactiveu la casella de selecció mitjançant la propietat 'desactivada' de la casella de selecció d'entrada
A més d'establir i tornar l'estat de la casella de selecció, la propietat 'desactivada' també permet als usuaris desactivar i desactivar la casella de selecció alhora. Vegem-ho pràcticament.
Codi HTML
Revisem el codi HTML escrit:
< estil corporal = 'text-align: centre' >< h2 > HTML Entrada DOM casella de selecció Propietat desactivada en JavaScript h2 >
casella de selecció : < tipus d'entrada = 'casilla de verificació' id = 'demo' > Formulari enviat entrada >< br >< br >
< botó al fer clic = 'checkDisable()' > Desactiveu la casella de selecció botó >
< botó al fer clic = 'checkUndisable()' > Desactiveu la casella de selecció botó >
Al bloc de codi anterior:
- De la mateixa manera, inclou una casella de selecció i afegeix un botó amb un ' fent clic ” esdeveniment que executa el “ checkDisable() ” funció al fer clic al botó.
- Després d'això, s'afegeix el segon botó que també utilitza el controlador d'esdeveniments 'onclick' per a l'execució del ' checkUndisable() ” quan fa clic al botó.
Codi JavaScript
A continuació, seguiu el codi que s'indica a continuació:
< guió >control de funció Desactivar ( ) {
document. getElementById ( 'demo' ) . discapacitat = veritat ;
}
comprovació de funció Desactivada ( ) {
document. getElementById ( 'demo' ) . discapacitat = fals ;
}
guió >
A les línies de codi anteriors:
- Definiu una funció anomenada “ checkDisable() ' que aplica el ' document.getElementById() ” per acostar-se a la casella de selecció mitjançant el seu identificador “demo” i establir el seu valor a “true”.
- La segona funció ' checkUndisable() La funció torna a aplicar el mètode 'document.getElementById()' per accedir de nou a la casella de selecció i establir el seu valor a 'fals' si l'usuari fa clic al segon botó inclòs anomenat 'Desactiva la casella de selecció'.
Sortida
La sortida 'desactiva' la casella de selecció donada quan l'usuari fa clic al primer botó i la 'desactiva' si l'usuari fa clic al segon botó en conseqüència.
Conclusió
A JavaScript, la casella de selecció d'entrada del DOM HTML ' discapacitat ', la propietat ajuda els usuaris a establir i retornar l'estat marcat de la 'casilla de verificació'. Defineix les sintaxis generalitzades tant per als processos 'set' com 'return'. La seva sintaxi establerta funciona amb dos valors ' veritat ' i ' fals ”. D'altra banda, la seva sintaxi de retorn no requereix cap paràmetre. Aquest article va demostrar l'objectiu, el funcionament i la implementació pràctica de la propietat 'desactivada' de la casella d'entrada d'HTML DOM a JavaScript.