Dieser Artikel veranschaulicht den Zweck, die Funktionsweise und die Verwendung der Eigenschaft „deaktiviert“ des HTML-DOM-Eingabe-Kontrollkästchens in JavaScript.
Wie funktioniert die Eigenschaft „deaktiviert“ des HTML-DOM-Eingabe-Kontrollkästchens in JavaScript?
Das Eingabe-Kontrollkästchen „ Behinderte Die Eigenschaft hängt vom Attribut „checkbox“ ab. Es funktioniert auf den HTML-Formularen und Eingabefeldern, um die angegebenen Kontrollkästchen zu deaktivieren und zu deaktivieren.
Syntax (Deaktivierte Eigenschaft festlegen)
checkboxObject. Behinderte = WAHR | FALSCHGemäß der definierten Rückgabesyntax unterstützt die Eigenschaft „disabled“ zwei Parameter, die wie folgt aufgeführt sind:
- WAHR: Es bedeutet, dass das entsprechende Kontrollkästchen deaktiviert ist.
- false (Standardwert): Es handelt sich um einen optionalen Wert, der angibt, dass das zugehörige Kontrollkästchen nicht deaktiviert ist.
Zurückgeben (das deaktivierte Eigentum zurückgeben)
checkboxObject. BehinderteIn der obigen Syntax ist das „ checkboxObject „entspricht dem HTML“ Kontrollkästchen ' Element.
Lassen Sie uns die oben definierten Syntaxen in den folgenden Beispielen verwenden, um die praktische Implementierung der Eigenschaft „disabled“ zu verstehen.
Beispiel 1: Anwenden der Eigenschaft „Eingabe-Kontrollkästchen deaktiviert“. Verwendung der grundlegenden Syntax
Im ersten Beispiel wird das „Kontrollkästchen“ hinzugefügt, um es mithilfe der definierten generalisierten Syntax zu deaktivieren.
HTML Quelltext
Analysieren Sie zunächst den angegebenen HTML-Code:
< Körperstil = „Textausrichtung: Mitte“ >
< h2 > HTML DOM-Eingabe Kontrollkästchen deaktivierte Eigenschaft in JavaScript h2 >
Kontrollkästchen : < Eingabetyp = „Kontrollkästchen“ Ausweis = 'Demo' > Formular eingereicht < br >< br >
< P > Das angegebene Kontrollkästchen ist deaktiviert P >
In den obigen Codezeilen:
- Der '
Das „Tag“ gibt den Körperabschnitt an, der am „Tag“ ausgerichtet ist. Center ” mit Hilfe der „ Stil ” Attribut. - Der ' „Tag definiert die Unterüberschrift der Ebene 2.
- Der '
„Tag erstellt ein „Kontrollkästchen“, indem es den Eingabetyp angibt „ Kontrollkästchen „mit einer zugewiesenen ID“ Demo “. - Der ' „Tag fügt ein Absatzelement hinzu, um das resultierende Ergebnis anzuzeigen.
JavaScript-Code
Schauen Sie sich als Nächstes den JavaScript-Code an:
< Skript >dokumentieren. getElementById ( 'Demo' ) . Behinderte = WAHR ;
Skript >
Im obigen Codeausschnitt ist das „ document.getElementById() Die Methode wird angewendet, um das Kontrollkästchen mithilfe seiner ID „demo“ abzurufen, und der Wert der Eigenschaft „disabled“ wird auf „ WAHR ”, wodurch das Kontrollkästchen deaktiviert wird.
Ausgang
Die obige Ausgabe bestätigt, dass das angegebene Kontrollkästchen aufgrund des „ Behinderte „Eigenschaft gesetzt auf „ WAHR “.
Beispiel 2: Rückgabe des Eigenschaftswerts „Eingabe-Kontrollkästchen“ „deaktiviert“.
In diesem Beispiel wird die Eigenschaft „disabled“ angewendet, um den Status des Ziel-Kontrollkästchens als booleschen Wert (wahr/falsch) zurückzugeben.
HTML Quelltext
Betrachten Sie den folgenden HTML-Code:
< Körperstil = „Textausrichtung: Mitte“ >< h2 > HTML DOM-Eingabe Kontrollkästchen deaktivierte Eigenschaft in JavaScript h2 >
Kontrollkästchen : < Eingabetyp = „Kontrollkästchen“ Behinderte = WAHR Ausweis = 'Demo' > Formular eingereicht < br >< br >
< p-ID = 'Probe' > P >
Im obigen Codeblock:
- Das Kontrollkästchen ist belegt und der Status des „ Behinderte Die Eigenschaft ist auf „ gesetzt. WAHR “.
- Danach ein leeres „ Das Element wird mit der zugewiesenen ID „sample“ hinzugefügt, um die Ausgabe anzuhängen.
JavaScript-Code
Fahren Sie nun mit dem JavaScript-Code fort:
< Skript >da ist ein = dokumentieren. getElementById ( 'Demo' ) . Behinderte ;
dokumentieren. getElementById ( 'Probe' ) . innerHTML = A ;
Skript >
Im obigen Code:
- Die Variable ' A „ nutzt die „ document.getElementById() ”-Methode, um über die ID „demo“ auf das Kontrollkästchen zuzugreifen und das „ Behinderte ”-Eigenschaft, um zu überprüfen, ob das abgerufene Kontrollkästchen deaktiviert ist oder nicht.
- Die erneut angewendete Methode „document.getElementById()“ holt den enthaltenen leeren Absatz und zeigt den Status der Eigenschaft „disabled“ als Absatz an.
Ausgang
Bei der Analyse gibt das Ergebnis den zugewiesenen Status „Kontrollkästchen“ zurück, d. h. „ WAHR “.
Beispiel 3: Deaktivieren und Deaktivieren des Kontrollkästchens mithilfe der Eingabe-Kontrollkästcheneigenschaft „disabled“.
Neben dem Festlegen und Zurückgeben des Kontrollkästchenstatus ermöglicht die Eigenschaft „deaktiviert“ den Benutzern auch das gleichzeitige Deaktivieren und Deaktivieren des Kontrollkästchens. Schauen wir es uns praktisch an.
HTML Quelltext
Sehen wir uns den geschriebenen HTML-Code an:
< Körperstil = „Textausrichtung: Mitte“ >< h2 > HTML DOM-Eingabe Kontrollkästchen deaktivierte Eigenschaft in JavaScript h2 >
Kontrollkästchen : < Eingabetyp = „Kontrollkästchen“ Ausweis = 'Demo' > Formular eingereicht Eingang >< br >< br >
< Schaltfläche onclick = „checkDisable()“ > Deaktivieren Sie das Kontrollkästchen Taste >
< Schaltfläche onclick = „checkUndisable()“ > Deaktivieren Sie das Kontrollkästchen Taste >
Im obigen Codeblock:
- Fügen Sie ebenfalls ein Kontrollkästchen ein und fügen Sie eine Schaltfläche mit einem „ onclick ”-Ereignis, das das „ ausführt checkDisable() ”-Funktion beim Klicken auf die Schaltfläche.
- Danach wird der zweite Button hinzugefügt, der ebenfalls den „onclick“-Event-Handler für die Ausführung des „ checkUndisable() ”-Funktion, wenn die Schaltfläche klickt.
JavaScript-Code
Gehen Sie als Nächstes den unten angegebenen Code durch:
< Skript >FunktionsprüfungDeaktivieren ( ) {
dokumentieren. getElementById ( 'Demo' ) . Behinderte = WAHR ;
}
FunktionsprüfungUndisable ( ) {
dokumentieren. getElementById ( 'Demo' ) . Behinderte = FALSCH ;
}
Skript >
In den obigen Codezeilen:
- Definieren Sie eine Funktion mit dem Namen „ checkDisable() ” das gilt für die „ document.getElementById() ”-Methode, um das Kontrollkästchen über seine ID „demo“ anzusprechen und seinen Wert auf „true“ zu setzen.
- Die zweite Funktion „ checkUndisable() Die Funktion „wendet erneut die Methode „document.getElementById()“ an, um erneut auf das Kontrollkästchen zuzugreifen und seinen Wert auf „false“ zu setzen, wenn der Benutzer auf die enthaltene zweite Schaltfläche mit dem Namen „Kontrollkästchen deaktivieren“ klickt.
Ausgang
Die Ausgabe „deaktiviert“ das angegebene Kontrollkästchen, wenn der Benutzer auf die erste Schaltfläche klickt, und „deaktiviert“ es, wenn der Benutzer entsprechend auf die zweite Schaltfläche klickt.
Abschluss
In JavaScript ist das HTML-DOM-Eingabe-Kontrollkästchen „ Behinderte Die Eigenschaft „hilft den Benutzern, den aktivierten Status des „Kontrollkästchens“ festzulegen und zurückzugeben. Es definiert die verallgemeinerten Syntaxen für die Prozesse „set“ und „return“. Seine Set-Syntax funktioniert mit zwei Werten „ WAHR ' Und ' FALSCH “. Andererseits erfordert die Rückgabesyntax keine Parameter. Dieser Artikel demonstrierte die objektive, funktionierende und praktische Implementierung der Eigenschaft „deaktiviert“ der HTML-DOM-Eingabe-Checkbox in JavaScript.