Tento článek ilustruje účel, fungování a použití vlastnosti HTML DOM Input Checkbox „disabled“ v JavaScriptu.
Jak funguje vlastnost „zakázáno“ zaškrtávací políčko vstupu HTML DOM v JavaScriptu?
Vstupní zaškrtávací políčko „ zakázáno ” závisí na atributu “checkbox”. Funguje na formulářích HTML a vstupních polích, aby zakázala a zrušila daná zaškrtávací políčka.
Syntaxe (nastavit zakázanou vlastnost)
checkboxObject. zakázáno = skutečný | NepravdivéPodle definované návratové syntaxe vlastnost „disabled“ podporuje dva parametry, které jsou uvedeny následovně:
- skutečný: Znamená to, že příslušné zaškrtávací políčko je zakázáno.
- false (výchozí hodnota): Je to volitelná hodnota, která označuje, že příslušné zaškrtávací políčko není deaktivováno.
Vrátit (vrátit deaktivovanou vlastnost)
checkboxObject. zakázánoVe výše uvedené syntaxi je „ checkboxObject “ odpovídá HTML “ zaškrtávací políčko prvek.
Využijme výše definované syntaxe v níže uvedených příkladech, abychom porozuměli praktické implementaci vlastnosti „disabled“.
Příklad 1: Použití vlastnosti „disabled“ zaškrtávacího pole Input Použití základní syntaxe
V prvním příkladu je přidáno „zaškrtávací políčko“, které jej deaktivuje pomocí definované zobecněné syntaxe.
HTML kód
Nejprve analyzujte daný HTML kód:
< styl těla = 'zarovnání textu: na střed' >
< h2 > HTML Vstup DOM Zaškrtávací políčko zakázána vlastnost v JavaScriptu h2 >
Zaškrtávací políčko : < Typ vstupu = 'zaškrtávací políčko' id = 'demo' > Formulář odeslán < br < br >
< p > Dané zaškrtávací políčko je deaktivováno p >
Ve výše uvedených řádcích kódu:
- ' značka ” určuje část těla, která je zarovnána se značkou “ centrum “ s pomocí „ styl ' atribut.
- ' ” tag definuje podnadpis úrovně 2.
- '
Značka ” vytvoří zaškrtávací políčko zadáním typu vstupu “ zaškrtávací políčko 's přiděleným id' demo “. - ' ” přidá prvek odstavce pro zobrazení výsledného výsledku.
JavaScript kód
Dále se podívejte na kód JavaScript:
< skript >dokument. getElementById ( 'demo' ) . zakázáno = skutečný ;
skript >
Ve výše uvedeném fragmentu kódu je „ document.getElementById() “ se použije metoda k načtení zaškrtávacího políčka pomocí jeho id „demo“ a hodnota vlastnosti „disabled“ je nastavena na „ skutečný “, která deaktivuje zaškrtávací políčko.
Výstup
Výše uvedený výstup potvrzuje, že dané zaškrtávací políčko je deaktivováno z důvodu „ zakázáno “ vlastnost nastavena na “ skutečný “.
Příklad 2: Vrácení hodnoty vlastnosti zaškrtávacího pole Input „disabled“.
Tento příklad použije vlastnost „disabled“ k vrácení stavu cílového zaškrtávacího políčka jako booleovskou hodnotu (true/false).
HTML kód
Zvažte následující HTML kód:
< styl těla = 'zarovnání textu: na střed' >< h2 > HTML Vstup DOM Zaškrtávací políčko zakázána vlastnost v JavaScriptu h2 >
Zaškrtávací políčko : < Typ vstupu = 'zaškrtávací políčko' zakázáno = skutečný id = 'demo' > Formulář odeslán < br < br >
< p id = 'vzorek' > p >
Ve výše uvedeném bloku kódu:
- Zaškrtávací políčko je přiřazeno a stav „ zakázáno “ vlastnost je nastavena na “ skutečný “.
- Poté prázdné „ ” je přidán s přiřazeným id “sample” pro připojení výstupu.
JavaScript kód
Nyní přejděte ke kódu JavaScript:
< skript >tady je = dokument. getElementById ( 'demo' ) . zakázáno ;
dokument. getElementById ( 'vzorek' ) . vnitřní HTML = A ;
skript >
Ve výše uvedeném kódu:
- Proměnná ' A “ využívá „ document.getElementById() “ pro přístup k zaškrtávacímu políčku pomocí jeho id „demo“ a přidružení „ zakázáno ” pro kontrolu, zda je zaškrtávací políčko načteno deaktivováno nebo ne.
- Znovu použitá metoda „document.getElementById()“ načte zahrnutý prázdný odstavec a zobrazí stav vlastnosti „disabled“ jako odstavec.
Výstup
Jak bylo analyzováno, výsledek vrací přidělený stav „zaškrtávací políčko“, tj. skutečný “.
Příklad 3: Zakázat a zrušit zaškrtnutí políčka pomocí zaškrtávacího políčka vstupu vlastnosti „disabled“.
Kromě nastavení a vrácení stavu zaškrtávacího políčka umožňuje vlastnost „vypnuto“ také uživatelům zakázat a zrušit zaškrtnutí současně. Podívejme se na to prakticky.
HTML kód
Podívejme se na napsaný HTML kód:
< styl těla = 'text-align: center' >< h2 > HTML Vstup DOM Zaškrtávací políčko vypnutá vlastnost v JavaScriptu h2 >
Zaškrtávací políčko : < Typ vstupu = 'zaškrtávací políčko' id = 'demo' > Formulář odeslán vstup < br < br >
< tlačítko onclick = 'checkDisable()' > Deaktivujte zaškrtávací políčko knoflík >
< tlačítko onclick = 'checkUndisable()' > Deaktivujte zaškrtávací políčko knoflík >
Ve výše uvedeném bloku kódu:
- Podobně zaškrtněte políčko a přidejte tlačítko s „ při kliknutí 'událost, která provede ' checkDisable() “ po kliknutí na tlačítko.
- Poté se přidá druhé tlačítko, které také používá obslužnou rutinu události „onclick“ pro provedení „ checkUndisable() ” po kliknutí na tlačítko.
JavaScript kód
Dále projděte níže uvedený kód:
< skript >kontrola funkce Zakázat ( ) {
dokument. getElementById ( 'demo' ) . zakázáno = skutečný ;
}
kontrola funkceNevypnuto ( ) {
dokument. getElementById ( 'demo' ) . zakázáno = Nepravdivé ;
}
skript >
Ve výše uvedených řádcích kódu:
- Definujte funkci s názvem „ checkDisable() “, který platí „ document.getElementById() “, abyste se k zaškrtávacímu políčku dostali přes jeho id „demo“ a nastavili jeho hodnotu na „true“.
- Druhá funkce ' checkUndisable() ” funkce znovu použije metodu “document.getElementById()” k opětovnému přístupu k zaškrtávacímu políčku a nastaví jeho hodnotu na “false”, pokud uživatel klikne na zahrnuté druhé tlačítko s názvem “Zrušit zaškrtnutí políčka”.
Výstup
Výstup „zakáže“ dané zaškrtávací políčko, když uživatel klikne na první tlačítko, a „zruší“ jej, pokud uživatel odpovídajícím způsobem klikne na druhé tlačítko.
Závěr
V JavaScriptu je zaškrtávací políčko HTML DOM Input “ zakázáno Vlastnost ” pomáhá uživatelům nastavit a vrátit zaškrtnutý stav zaškrtávacího políčka. Definuje zobecněné syntaxe pro procesy „set“ i „return“. Jeho nastavená syntaxe funguje na dvou hodnotách “ skutečný ' a ' Nepravdivé “. Na druhou stranu jeho návratová syntaxe nevyžaduje žádný parametr. Tento článek demonstroval cíl, fungující a praktickou implementaci vlastnosti HTML DOM Input Checkbox „disabled“ v JavaScriptu.