Denne artikkelen illustrerer formålet, arbeidet og bruken av egenskapen 'deaktivert' for HTML DOM Input Checkbox i JavaScript.
Hvordan fungerer HTML DOM-inndataavmerkingsboksen 'deaktivert' egenskap i JavaScript?
Avmerkingsboksen for inndata ' funksjonshemmet '-egenskapen avhenger av 'checkbox'-attributtet. Det fungerer på HTML-skjemaene og inndatafeltene for å deaktivere og deaktivere de gitte avmerkingsboksene.
Syntaks (Angi den deaktiverte egenskapen)
avkrysningsboksObjekt. funksjonshemmet = ekte | falskI henhold til den definerte retursyntaksen, støtter 'disabled'-egenskapen to parametere som er oppført som følger:
- ekte: Det betyr at den tilsvarende avmerkingsboksen er deaktivert.
- usant (standardverdi): Det er en valgfri verdi som angir at den tilknyttede avmerkingsboksen ikke er deaktivert.
Returner (Returner den deaktiverte egenskapen)
avkrysningsboksObjekt. funksjonshemmetI syntaksen ovenfor, ' avkrysningsboksObjekt ' tilsvarer HTML-en ' avmerkingsboksen ' element.
La oss bruke de ovenfor definerte syntaksene i eksemplene nedenfor for å forstå den praktiske implementeringen av egenskapen 'deaktivert'.
Eksempel 1: Bruk av Input Checkbox 'deaktivert' egenskap Bruker grunnleggende syntaks
I det første eksemplet er 'avmerkingsboksen' lagt til for å deaktivere den ved å bruke den definerte generaliserte syntaksen.
HTML-kode
Først analyserer du den gitte HTML-koden:
< kroppsstil = 'text-align: center' >
< h2 > HTML DOM-inngang Avmerkingsboks deaktivert eiendom i JavaScript h2 >
Avmerkingsboks : < inndatatype = 'avmerkingsboks' id = 'demo' > Skjema sendt < br >< br >
< s > Den angitte avmerkingsboksen er deaktivert s >
I kodelinjene ovenfor:
- « '-taggen spesifiserer hoveddelen som er justert til ' senter ' ved hjelp av ' stil ' Egenskap.
- « ”-taggen definerer underoverskriften til nivå 2.
- « '-taggen oppretter en 'avmerkingsboks' ved å spesifisere inndatatypen ' avmerkingsboksen 'ha en tildelt id' demo '.
- « ”-taggen legger til et avsnittselement for å vise det resulterende resultatet.
JavaScript-kode
Se deretter på JavaScript-koden:
< manus >dokument. getElementById ( 'demo' ) . funksjonshemmet = ekte ;
manus >
I kodebiten ovenfor, ' document.getElementById() ”-metoden brukes for å hente avkrysningsboksen ved hjelp av ID-en “demo” og verdien av egenskapen “disabled” er satt til “ ekte ' som deaktiverer avmerkingsboksen.
Produksjon
Utgangen ovenfor bekrefter at den gitte avmerkingsboksen er deaktivert på grunn av ' funksjonshemmet ' egenskap satt til ' ekte '.
Eksempel 2: Returnerer inndataavmerkingsboksen 'deaktivert' egenskapsverdi
Dette eksemplet bruker egenskapen 'disabled' for å returnere statusen til den målrettede avmerkingsboksen som en boolsk verdi (true/false).
HTML-kode
Tenk på følgende HTML-kode:
< kroppsstil = 'text-align: center' >< h2 > HTML DOM-inngang Avmerkingsboks deaktivert eiendom i JavaScript h2 >
Avmerkingsboks : < inndatatype = 'avmerkingsboks' funksjonshemmet = ekte id = 'demo' > Skjema sendt < br >< br >
< p id = 'prøve' > s >
I kodeblokken ovenfor:
- Avmerkingsboksen er tildelt og statusen til ' funksjonshemmet egenskapen er satt til ekte '.
- Etter det, en tom ' '-elementet legges til med en tildelt id 'sample' for å legge til utdata.
JavaScript-kode
Gå nå videre til JavaScript-koden:
< manus >det er en = dokument. getElementById ( 'demo' ) . funksjonshemmet ;
dokument. getElementById ( 'prøve' ) . indreHTML = en ;
manus >
I koden ovenfor:
- Variabelen ' en ' bruker ' document.getElementById() '-metoden for å få tilgang til avkrysningsboksen ved å bruke dens id 'demo' og knytte ' funksjonshemmet ”-egenskap for å sjekke om den hentede avmerkingsboksen er deaktivert eller ikke.
- Metoden 'document.getElementById()' som brukes igjen, henter det inkluderte tomme avsnittet og viser statusen til egenskapen 'disabled' som et avsnitt.
Produksjon
Som analysert, returnerer resultatet 'avmerkingsboksen' tildelt status, dvs. ' ekte '.
Eksempel 3: Deaktiver og deaktiver avmerkingsboksen ved å bruke egenskapen 'deaktivert' for inngangsavmerkingsboksen
Bortsett fra å angi og returnere avkrysningsboksstatusen, lar egenskapen 'deaktivert' også brukerne deaktivere og deaktivere avmerkingsboksen samtidig. La oss se det praktisk talt.
HTML-kode
La oss se gjennom den skrevne HTML-koden:
< kroppsstil = 'text-align: center' >< h2 > HTML DOM-inngang Avmerkingsboks deaktivert eiendom i JavaScript h2 >
Avmerkingsboks : < inndatatype = 'avmerkingsboks' id = 'demo' > Skjema sendt input >< br >< br >
< knappen ved å klikke = 'checkDisable()' > Deaktiver avmerkingsboksen knapp >
< knappen ved å klikke = 'checkUdisable()' > Deaktiver avmerkingsboksen knapp >
I kodeblokken ovenfor:
- Ta på samme måte en avmerkingsboks og legg til en knapp som har en ' ved trykk ' hendelse som utfører ' checkDisable() ”-funksjonen når du klikker på knappen.
- Etter det legges den andre knappen til som også bruker 'onclick' hendelsesbehandleren for utførelse av ' checkUdisable() ”-funksjonen når knappen klikker.
JavaScript-kode
Gå deretter gjennom koden nedenfor:
< manus >funksjonskontroll Deaktiver ( ) {
dokument. getElementById ( 'demo' ) . funksjonshemmet = ekte ;
}
funksjonskontrollUdisable ( ) {
dokument. getElementById ( 'demo' ) . funksjonshemmet = falsk ;
}
manus >
I kodelinjene ovenfor:
- Definer en funksjon kalt ' checkDisable() ' som gjelder ' document.getElementById() ”-metoden for å nærme seg avkrysningsboksen via sin id “demo” og sette verdien til “true”.
- Den andre funksjonen ' checkUdisable() '-funksjonen bruker igjen 'document.getElementById()'-metoden for å få tilgang til avkrysningsboksen igjen og sette verdien til 'false' hvis brukeren klikker på den inkluderte andre knappen kalt 'Undisable the checkbox'.
Produksjon
Utgangen 'deaktiverer' den gitte avkrysningsboksen når brukeren klikker på den første knappen og 'un-deaktiverer' den hvis brukeren klikker på den andre knappen tilsvarende.
Konklusjon
I JavaScript, HTML DOM Input Checkbox ' funksjonshemmet '-egenskapen hjelper brukerne med å angi og returnere den sjekkede statusen til 'avmerkingsboksen'. Den definerer de generaliserte syntaksene for både 'sett'- og 'retur'-prosesser. Dens innstilte syntaks fungerer på to verdier ' ekte ' og ' falsk '. På den annen side krever ikke retursyntaksen noen parameter. Denne artikkelen demonstrerte den objektive, fungerende og praktiske implementeringen av egenskapen 'deaktivert' for HTML DOM Input Checkbox i JavaScript.