Questo articolo illustra lo scopo, il funzionamento e l'utilizzo della proprietà 'disabilitata' della casella di controllo HTML DOM Input in JavaScript.
Come funziona la proprietà 'disabilitata' della casella di controllo HTML DOM Input in JavaScript?
La casella di controllo di input ' Disabilitato La proprietà ” dipende dall'attributo “casella di controllo”. Funziona sui moduli HTML e sui campi di input per disabilitare e disabilitare le caselle di controllo fornite.
Sintassi (impostare la proprietà disabilitata)
casella di controlloOggetto. Disabilitato = VERO | falsoSecondo la sintassi di ritorno definita, la proprietà 'disabled' supporta due parametri che sono elencati come segue:
- VERO: Rappresenta che la casella di controllo corrispondente è disabilitata.
- falso (valore predefinito): È un valore facoltativo che indica che la casella di controllo associata non è disabilitata.
Restituzione (restituzione dell'immobile disabile)
casella di controlloOggetto. DisabilitatoNella sintassi precedente, il ' casella di controlloOggetto ” corrisponde all'HTML “ casella di controllo elemento '.
Utilizziamo le sintassi sopra definite negli esempi seguenti per comprendere l'implementazione pratica della proprietà 'disabled'.
Esempio 1: applicazione della proprietà 'disabled' della casella di controllo Input Utilizzo della sintassi di base
Nel primo esempio, viene aggiunta la 'casella di controllo' per disabilitarla utilizzando la sintassi generalizzata definita.
Codice HTML
Innanzitutto, analizza il codice HTML fornito:
< stile del corpo = 'allineamento del testo: al centro' >
< h2 > HTML Ingresso DOM Casella di controllo Proprietà disabilitata in JavaScript h2 >
Casella di controllo : < tipo di ingresso = 'casella di controllo' id = 'demo' > Modulo inviato < fratello >< fratello >
< P > La casella di controllo indicata è disabilitata P >
Nelle righe di codice sopra:
- IL '
Il tag ' specifica la sezione del corpo che è allineata al ' centro ” con l'aiuto del “ stile 'attributo. - IL ' Il tag ” definisce il sottotitolo del livello 2.
- IL ' Il tag ' crea una 'casella di controllo' specificando il tipo di input ' casella di controllo ” con un ID assegnato “ dimostrazione ”.
- IL ' Il tag ” aggiunge un elemento di paragrafo per visualizzare il risultato risultante.
codice javascript
Quindi, guarda il codice JavaScript:
< copione >documento. getElementById ( 'demo' ) . Disabilitato = VERO ;
copione >
Nel frammento di codice sopra, il ' documento.getElementById() ” viene applicato il metodo per recuperare la casella di controllo utilizzando il suo id “demo” e il valore della proprietà “disabled” è impostato su “ VERO ” che disabilita la casella di controllo.
Produzione
L'output precedente conferma che la casella di controllo indicata è disabilitata a causa del ' Disabilitato 'proprietà impostata su' VERO ”.
Esempio 2: restituzione del valore della proprietà 'disabled' della casella di controllo Input
Questo esempio applica la proprietà 'disabled' per restituire lo stato della casella di controllo mirata come valore booleano (vero/falso).
Codice HTML
Considera il seguente codice HTML:
< stile del corpo = 'allineamento del testo: al centro' >< h2 > HTML Ingresso DOM Casella di controllo Proprietà disabilitata in JavaScript h2 >
Casella di controllo : < tipo di ingresso = 'casella di spunta' Disabilitato = VERO id = 'demo' > Modulo inviato < fratello >< fratello >
< p id = 'campione' > P >
Nel blocco di codice sopra:
- La casella di controllo è assegnata e lo stato del ' Disabilitato La proprietà 'è impostata su' VERO ”.
- Dopodiché, un vuoto “ ” viene aggiunto con un id assegnato “sample” per aggiungere l'output.
codice javascript
Ora, passa al codice JavaScript:
< copione >c'è un = documento. getElementById ( 'demo' ) . Disabilitato ;
documento. getElementById ( 'campione' ) . innerHTML = UN ;
copione >
Nel codice sopra:
- La variabile “ UN ” utilizza il “ documento.getElementById() ” per accedere alla checkbox utilizzando il suo id “demo” e associare il “ Disabilitato ” per verificare se la casella di controllo recuperata è disabilitata o meno.
- Il metodo 'document.getElementById()' applicato nuovamente recupera il paragrafo vuoto incluso e visualizza lo stato della proprietà 'disabilitato' come un paragrafo.
Produzione
Come analizzato, il risultato restituisce lo stato allocato 'casella di controllo', ovvero ' VERO ”.
Esempio 3: disabilitare e disabilitare la casella di controllo utilizzando la proprietà 'disabilitata' della casella di controllo di input
Oltre a impostare e restituire lo stato della casella di controllo, la proprietà 'disabilitata' consente anche agli utenti di disabilitare e riattivare la casella di controllo contemporaneamente. Vediamolo praticamente.
Codice HTML
Rivediamo il codice HTML scritto:
< stile del corpo = 'allineamento del testo: al centro' >< h2 > HTML Ingresso DOM Casella di controllo Proprietà disabilitata in JavaScript h2 >
Casella di controllo : < tipo di ingresso = 'casella di controllo' id = 'demo' > Modulo inviato ingresso >< fratello >< fratello >
< pulsante al clic = 'checkDisable()' > Disabilita la casella di controllo pulsante >
< pulsante al clic = 'checkUndisable()' > Disabilita la casella di controllo pulsante >
Nel blocco di codice sopra:
- Allo stesso modo, includi una casella di controllo e aggiungi un pulsante con un ' al clic ” evento che esegue il “ checkDisable() ” funzione al clic del pulsante.
- Successivamente, viene aggiunto il secondo pulsante che utilizza anche il gestore di eventi 'onclick' per l'esecuzione del ' checkUndisable() ” quando si fa clic sul pulsante.
codice javascript
Quindi, passare attraverso il codice indicato di seguito:
< copione >verifica della funzioneDisabilita ( ) {
documento. getElementById ( 'demo' ) . Disabilitato = VERO ;
}
funzione checkUndisable ( ) {
documento. getElementById ( 'demo' ) . Disabilitato = falso ;
}
copione >
Nelle righe di codice sopra:
- Definire una funzione denominata ' checkDisable() ” che applica il “ documento.getElementById() ” per accedere alla casella di controllo tramite il suo id “demo” e impostarne il valore su “true”.
- La seconda funzione “ checkUndisable() ” applica nuovamente il metodo “document.getElementById()” per accedere nuovamente alla casella di controllo e ne imposta il valore su “false” se l'utente fa clic sul secondo pulsante incluso denominato “Undisable the checkbox”.
Produzione
L'output 'disabilita' la casella di controllo data quando l'utente fa clic sul primo pulsante e la 'disabilita' se l'utente fa clic sul secondo pulsante di conseguenza.
Conclusione
In JavaScript, la casella di controllo di input DOM HTML ' Disabilitato La proprietà ” aiuta gli utenti a impostare e restituire lo stato selezionato della “casella di controllo”. Definisce le sintassi generalizzate per entrambi i processi 'set' e 'return'. La sua sintassi set funziona su due valori “ VERO ' E ' falso ”. D'altra parte, la sua sintassi di ritorno non richiede alcun parametro. Questo articolo ha dimostrato l'implementazione oggettiva, funzionante e pratica della proprietà 'disabilitata' della casella di controllo HTML DOM Input in JavaScript.