Ten artykuł ilustruje cel, działanie i użycie właściwości „wyłączone” pola wyboru HTML DOM Input Checkbox w JavaScript.
W jaki sposób pole wyboru HTML DOM Input Checkbox „wyłączone” działa w JavaScript?
Pole wyboru wprowadzania „ wyłączony ” zależy od atrybutu „checkbox”. Działa na formularzach HTML i polach wejściowych, aby wyłączyć i wyłączyć podane pola wyboru.
Składnia (ustaw wyłączoną właściwość)
pole wyboruObiekt. wyłączony = PRAWDA | FAŁSZZgodnie ze zdefiniowaną składnią zwrotu właściwość „disabled” obsługuje dwa parametry, które są wymienione w następujący sposób:
- PRAWDA: Oznacza to, że odpowiednie pole wyboru jest wyłączone.
- fałsz (wartość domyślna): Jest to wartość opcjonalna, która oznacza, że powiązane pole wyboru nie jest wyłączone.
Return (zwróć niepełnosprawną własność)
pole wyboruObiekt. wyłączonyW powyższej składni „ pole wyboruObiekt ” odpowiada kodowi HTML „ pole wyboru ' element.
Wykorzystajmy wyżej zdefiniowaną składnię w poniższych przykładach, aby zrozumieć praktyczną implementację właściwości „disabled”.
Przykład 1: Stosowanie właściwości „wyłączone” pola wyboru danych wejściowych Korzystanie z podstawowej składni
W pierwszym przykładzie dodano „pole wyboru”, aby je wyłączyć, używając zdefiniowanej uogólnionej składni.
Kod HTML
Najpierw przeanalizuj podany kod HTML:
< Budowa ciała = „wyrównanie tekstu: środek” >
< h2 > HTML Wejście DOM Pole wyboru wyłączona właściwość w JavaScript h2 >
Pole wyboru : < typ wejścia = „pole wyboru” ID = 'próbny' > Formularz przesłany < br >< br >
< P > Podane pole wyboru jest wyłączone P >
W powyższych liniach kodu:
- „
” określa sekcję ciała, która jest wyrównana do „ Centrum ” przy pomocy „ styl ' atrybut. - „ Znacznik ” określa podtytuł poziomu 2.
- „
” tworzy „pole wyboru”, określając typ danych wejściowych „ pole wyboru „posiadający przypisany identyfikator” próbny ”. - „ ” dodaje element akapitu, aby wyświetlić wynikowy wynik.
Kod JavaScript
Następnie spójrz na kod JavaScript:
< scenariusz >dokument. getElementById ( 'próbny' ) . wyłączony = PRAWDA ;
scenariusz >
W powyższym fragmencie kodu „ document.getElementById() ” jest stosowana do pobrania pola wyboru przy użyciu jego identyfikatora „demo”, a wartość właściwości „disabled” jest ustawiona na „ PRAWDA ”, co wyłącza pole wyboru.
Wyjście
Powyższe dane wyjściowe potwierdzają, że dane pole wyboru jest wyłączone z powodu „ wyłączony ” właściwość ustawiona na „ PRAWDA ”.
Przykład 2: Zwracanie wartości właściwości „wyłączone” pola wyboru wejściowego
W tym przykładzie zastosowano właściwość „disabled” w celu zwrócenia stanu docelowego pola wyboru jako wartości logicznej (prawda/fałsz).
Kod HTML
Rozważ następujący kod HTML:
< Budowa ciała = „wyrównanie tekstu: środek” >< h2 > HTML Wejście DOM Pole wyboru wyłączona właściwość w JavaScript h2 >
Pole wyboru : < typ wejścia = „pole wyboru” wyłączony = PRAWDA ID = 'próbny' > Formularz przesłany < br >< br >
< identyfikator p = 'próbka' > P >
W powyższym bloku kodu:
- Pole wyboru jest przypisane, a status „ wyłączony ” właściwość jest ustawiona na „ PRAWDA ”.
- Następnie pusty „ Element ” jest dodawany z przypisanym identyfikatorem „próbka”, aby dołączyć dane wyjściowe.
Kod JavaScript
Teraz przejdź do kodu JavaScript:
< scenariusz >tam jest = dokument. getElementById ( 'próbny' ) . wyłączony ;
dokument. getElementById ( 'próbka' ) . wewnętrzny HTML = A ;
scenariusz >
W powyższym kodzie:
- Zmienna „ A „wykorzystuje” document.getElementById() ”, aby uzyskać dostęp do pola wyboru przy użyciu jego identyfikatora „demo” i powiązać „ wyłączony ”, aby sprawdzić, czy pobrane pole wyboru jest wyłączone, czy nie.
- Ponownie zastosowana metoda „document.getElementById()” pobiera dołączony pusty akapit i wyświetla stan właściwości „disabled” jako akapit.
Wyjście
Po przeanalizowaniu wynik zwraca status przydzielony „polu wyboru”, tj. „ PRAWDA ”.
Przykład 3: Wyłącz i wyłącz pole wyboru przy użyciu właściwości „wyłączone” pola wyboru danych wejściowych
Oprócz ustawiania i zwracania statusu checkboxa, właściwość „disabled” pozwala użytkownikom na jednoczesne wyłączanie i odblokowywanie checkboxa. Zobaczmy to praktycznie.
Kod HTML
Przeanalizujmy napisany kod HTML:
< Budowa ciała = „wyrównanie tekstu: środek” >< h2 > HTML Wejście DOM Pole wyboru wyłączona właściwość w JavaScript h2 >
Pole wyboru : < typ wejścia = „pole wyboru” ID = 'próbny' > Formularz przesłany wejście >< br >< br >
< przycisk po kliknięciu = 'checkDisable()' > Wyłącz pole wyboru przycisk >
< przycisk po kliknięciu = 'checkNiewyłączone()' > Wyłącz pole wyboru przycisk >
W powyższym bloku kodu:
- Podobnie umieść pole wyboru i dodaj przycisk z „ na kliknięcie ” zdarzenie, które wykonuje „ sprawdźWyłącz() ” po kliknięciu przycisku.
- Następnie dodawany jest drugi przycisk, który również wykorzystuje moduł obsługi zdarzeń „onclick” do wykonania polecenia „ sprawdźNiewyłączalne() ” po kliknięciu przycisku.
Kod JavaScript
Następnie przejdź przez poniższy kod:
< scenariusz >sprawdzanie funkcji Wyłącz ( ) {
dokument. getElementById ( 'próbny' ) . wyłączony = PRAWDA ;
}
sprawdzanie funkcji Nie można wyłączyć ( ) {
dokument. getElementById ( 'próbny' ) . wyłączony = FAŁSZ ;
}
scenariusz >
W powyższych liniach kodu:
- Zdefiniuj funkcję o nazwie „ sprawdźWyłącz() ”, który dotyczy „ document.getElementById() ”, aby podejść do pola wyboru za pomocą jego identyfikatora „demo” i ustawić jego wartość na „true”.
- Druga funkcja „ sprawdźNiewyłączalne() ” ponownie stosuje metodę „document.getElementById()”, aby ponownie uzyskać dostęp do pola wyboru i ustawić jego wartość na „false”, jeśli użytkownik kliknie drugi przycisk o nazwie „Usuń zaznaczenie pola wyboru”.
Wyjście
Wyjście „wyłącza” dane pole wyboru, gdy użytkownik kliknie pierwszy przycisk i „odblokowuje”, jeśli użytkownik odpowiednio kliknie drugi przycisk.
Wniosek
W JavaScript pole wyboru HTML DOM Input „ wyłączony ” pomaga użytkownikom w ustawianiu i zwracaniu zaznaczonego statusu „pola wyboru”. Definiuje uogólnioną składnię zarówno dla procesów „set”, jak i „return”. Jego składnia zestawu działa na dwóch wartościach „ PRAWDA ' I ' FAŁSZ ”. Z drugiej strony, jego składnia powrotu nie wymaga żadnego parametru. W tym artykule zademonstrowano obiektywną, działającą i praktyczną implementację „wyłączonej” właściwości HTML DOM Input Checkbox w JavaScript.