Acest articol ilustrează scopul, funcționarea și utilizarea proprietății „dezactivate” casetei de selectare a introducerii DOM HTML în JavaScript.
Cum funcționează proprietatea „dezactivată” caseta de selectare a introducerii DOM HTML în JavaScript?
Caseta de selectare a introducerii „ dezactivat ” proprietatea depinde de atributul „checkbox”. Funcționează pe formularele HTML și câmpurile de intrare pentru a dezactiva și dezactiva casetele de selectare date.
Sintaxă (Setați proprietatea dezactivată)
caseta de selectareObiect. dezactivat = Adevărat | falsÎn conformitate cu sintaxa de returnare definită, proprietatea „disabled” acceptă doi parametri care sunt enumerați după cum urmează:
- Adevărat: Aceasta înseamnă că caseta de selectare corespunzătoare este dezactivată.
- false (valoare implicită): Este o valoare opțională care indică faptul că caseta de selectare asociată nu este dezactivată.
Returnare (Returnați proprietatea dezactivată)
caseta de selectareObiect. dezactivatÎn sintaxa de mai sus, „ caseta de selectareObiect ” corespunde HTML ” Caseta de bifat ' element.
Să folosim sintaxele definite mai sus în exemplele de mai jos pentru a înțelege implementarea practică a proprietății „dezactivate”.
Exemplul 1: Aplicarea casetei de selectare a proprietății „dezactivat”. Folosind Sintaxa de bază
În primul exemplu, „căsuța de selectare” este adăugată pentru a o dezactiva folosind sintaxa generalizată definită.
Cod HTML
În primul rând, analizați codul HTML dat:
< stilul corpului = „text-align: center” >
< h2 > HTML Intrare DOM Caseta de bifat Proprietate dezactivată în JavaScript h2 >
Caseta de bifat : < tip de introducere = 'Caseta de bifat' id = 'demo' > Formularul trimis < br >< br >
< p > Caseta de selectare dată este dezactivată p >
În liniile de cod de mai sus:
- „
„eticheta” specifică secțiunea corpului care este aliniată la „ centru ' cu ajutorul ' stil ” atribut. - „ Eticheta ” definește subtitlul de nivel 2.
- „ „eticheta creează o „căsuță de selectare” prin specificarea tipului de intrare „ Caseta de bifat „avand un ID alocat” demonstrație ”.
- „ Eticheta ” adaugă un element de paragraf pentru a afișa rezultatul rezultat.
Cod JavaScript
Apoi, uită-te la codul JavaScript:
< scenariu >document. getElementById ( 'demo' ) . dezactivat = Adevărat ;
scenariu >
În fragmentul de cod de mai sus, „ document.getElementById() ” este aplicată pentru a prelua caseta de selectare folosind id-ul „demo” al acesteia, iar valoarea proprietății „dezactivat” este setată la „ Adevărat ” care dezactivează caseta de selectare.
Ieșire
Ieșirea de mai sus confirmă că caseta de selectare dată este dezactivată din cauza „ dezactivat ” proprietate setată la ” Adevărat ”.
Exemplul 2: returnarea casetei de selectare „dezactivată” a valorii proprietății
Acest exemplu aplică proprietatea „dezactivat” pentru a returna starea casetei de selectare vizate ca valoare booleană (adevărat/fals).
Cod HTML
Luați în considerare următorul cod HTML:
< stilul corpului = „text-align: center” >< h2 > HTML Intrare DOM Caseta de bifat Proprietate dezactivată în JavaScript h2 >
Caseta de bifat : < tip de introducere = 'Caseta de bifat' dezactivat = Adevărat id = 'demo' > Formularul trimis < br >< br >
< p id = 'probă' > p >
În blocul de cod de mai sus:
- Caseta de selectare este atribuită și starea „ dezactivat „proprietatea este setată la „ Adevărat ”.
- După aceea, un „gol” ” elementul este adăugat cu un id alocat „eșantion” pentru a adăuga rezultatul.
Cod JavaScript
Acum, treceți la codul JavaScript:
< scenariu >este un = document. getElementById ( 'demo' ) . dezactivat ;
document. getElementById ( 'probă' ) . innerHTML = A ;
scenariu >
În codul de mai sus:
- Variabila „ A „ folosește „ document.getElementById() ” pentru a accesa caseta de selectare folosind id-ul „demo” al acesteia și asocierea „ dezactivat ” pentru a verifica dacă caseta de selectare preluată este dezactivată sau nu.
- Metoda „document.getElementById()” aplicată din nou preia paragraful gol inclus și afișează starea proprietății „dezactivat” ca paragraf.
Ieșire
După cum sa analizat, rezultatul returnează starea alocată „căsuță de selectare”, adică „ Adevărat ”.
Exemplul 3: Dezactivați și dezactivați caseta de selectare folosind proprietatea „dezactivată” casetă de selectare de intrare
Pe lângă setarea și returnarea stării casetei de selectare, proprietatea „dezactivată” permite utilizatorilor să dezactiveze și să dezactiveze caseta de selectare în același timp. Să vedem practic.
Cod HTML
Să revizuim codul HTML scris:
< stilul corpului = „text-align: center” >< h2 > HTML Intrare DOM Caseta de bifat Proprietate dezactivată în JavaScript h2 >
Caseta de bifat : < tip de introducere = 'Caseta de bifat' id = 'demo' > Formularul trimis intrare >< br >< br >
< butonul la clic = „checkDisable()” > Dezactivează caseta de selectare buton >
< butonul la clic = 'checkUndisable()' > Dezactivează caseta de selectare buton >
În blocul de cod de mai sus:
- De asemenea, includeți o casetă de selectare și adăugați un buton având un „ onclick ” eveniment care execută ” checkDisable() ” la clic pe butonul.
- După aceea, se adaugă al doilea buton care utilizează, de asemenea, handlerul de evenimente „onclick” pentru executarea „ checkUndezable() ” atunci când butonul face clic.
Cod JavaScript
Apoi, parcurgeți codul de mai jos:
< scenariu >funcția de verificareDezactivare ( ) {
document. getElementById ( 'demo' ) . dezactivat = Adevărat ;
}
funcția de verificareDezactivare ( ) {
document. getElementById ( 'demo' ) . dezactivat = fals ;
}
scenariu >
În liniile de cod de mai sus:
- Definiți o funcție numită „ checkDisable() ' care aplică ' document.getElementById() ” pentru a aborda caseta de selectare prin intermediul ID-ului „demo” și a seta valoarea acesteia la „adevărat”.
- A doua funcție „ checkUndezable() ” funcția aplică din nou metoda „document.getElementById()” pentru a accesa din nou caseta de selectare și pentru a seta valoarea acesteia la „false” dacă utilizatorul face clic pe al doilea buton inclus numit „Dezactivați caseta de selectare”.
Ieșire
Ieșirea „dezactivează” caseta de selectare dată când utilizatorul face clic pe primul buton și o „dezactivează” dacă utilizatorul face clic pe al doilea buton în consecință.
Concluzie
În JavaScript, caseta de selectare a introducerii DOM HTML „ dezactivat ” proprietatea ajută utilizatorii să seteze și să returneze starea bifată a „căsuței de selectare”. Acesta definește sintaxele generalizate atât pentru procesele „set” cât și pentru „return”. Sintaxa sa setată funcționează pe două valori „ Adevărat ' și ' fals ”. Pe de altă parte, sintaxa sa de returnare nu necesită niciun parametru. Acest articol a demonstrat obiectivul, funcționarea și implementarea practică a proprietății „dezactivate” casetei de selectare HTML DOM în JavaScript.