Inilalarawan ng artikulong ito ang layunin, pagtatrabaho, at paggamit ng HTML DOM Input Checkbox na 'hindi pinagana' na property sa JavaScript.
Paano Gumagana ang HTML DOM Input Checkbox na 'hindi pinagana' na Property sa JavaScript?
Ang checkbox ng input na ' may kapansanan Ang ” property ay depende sa attribute na “checkbox”. Gumagana ito sa mga HTML form at input field upang i-disable at i-un-disable ang mga ibinigay na checkbox.
Syntax (Itakda ang hindi pinaganang Property)
checkboxObject. may kapansanan = totoo | maliAyon sa tinukoy na return syntax, sinusuportahan ng property na 'disabled' ang dalawang parameter na nakalista bilang mga sumusunod:
- totoo: Kinakatawan nito na ang kaukulang checkbox ay hindi pinagana.
- false (Default na halaga): Ito ay isang opsyonal na halaga na nagsasaad na ang nauugnay na checkbox ay hindi pinagana.
Ibalik (Ibalik ang may kapansanan na Ari-arian)
checkboxObject. may kapansananSa syntax sa itaas, ang ' checkboxObject ' tumutugma sa HTML ' checkbox ' elemento.
Gamitin natin ang mga natukoy na syntax sa itaas sa mga halimbawa sa ibaba para maunawaan ang praktikal na pagpapatupad ng property na 'naka-disable.'
Halimbawa 1: Paglalapat ng Input Checkbox na 'disabled' Property Gamit ang Basic Syntax
Sa unang halimbawa, ang 'checkbox' ay idinagdag upang hindi paganahin ito sa pamamagitan ng paggamit ng tinukoy na pangkalahatang syntax.
HTML Code
Una, suriin ang ibinigay na HTML code:
< istilo ng katawan = 'text-align: center' >
< h2 > HTML DOM Input Checkbox hindi pinagana ang Property sa JavaScript h2 >
Checkbox : < uri ng input = 'checkbox' id = 'demo' > Naisumite ang Form < br >< br >
< p > Ang ibinigay na checkbox ay hindi pinagana p >
Sa mga linya ng code sa itaas:
- Ang '
Tinutukoy ng tag na ” ang seksyon ng katawan na nakahanay sa “ gitna 'sa tulong ng' istilo ” katangian. - Ang ' Tinutukoy ng tag na ” ang subheading ng level 2.
- Ang ' Ang tag na ” ay lumilikha ng isang “checkbox” sa pamamagitan ng pagtukoy sa uri ng input “ checkbox 'pagkakaroon ng nakatalagang id' demo ”.
- Ang ' Ang tag ng ” ay nagdaragdag ng elemento ng talata upang ipakita ang resultang kinalabasan.
JavaScript Code
Susunod, tingnan ang JavaScript code:
< script >dokumento. getElementById ( 'demo' ) . may kapansanan = totoo ;
script >
Sa snippet ng code sa itaas, ang “ document.getElementById() Ang paraan ng ” ay inilapat upang kunin ang checkbox gamit ang id nitong “demo” at ang halaga ng property na “disabled” ay nakatakda sa “ totoo ” na hindi pinapagana ang checkbox.
Output
Kinukumpirma ng output sa itaas na ang ibinigay na checkbox ay hindi pinagana dahil sa ' may kapansanan ' property set to ' totoo ”.
Halimbawa 2: Ibinabalik ang Input Checkbox na “disabled” na Property Value
Inilalapat ng halimbawang ito ang property na “disabled” para ibalik ang status ng naka-target na checkbox bilang boolean value(true/false).
HTML Code
Isaalang-alang ang sumusunod na HTML code:
< istilo ng katawan = 'text-align: center' >< h2 > HTML DOM Input Checkbox hindi pinagana ang Property sa JavaScript h2 >
Checkbox : < uri ng input = 'checkbox' may kapansanan = totoo id = 'demo' > Naisumite ang Form < br >< br >
< p id = 'sample' > p >
Sa itaas na bloke ng code:
- Ang checkbox ay itinalaga at ang katayuan ng ' may kapansanan 'Ang ari-arian ay nakatakda sa ' totoo ”.
- Pagkatapos nito, isang walang laman ' Ang elemento ng ” ay idinagdag na may nakatalagang id na “sample” upang idagdag ang output.
JavaScript Code
Ngayon, lumipat sa JavaScript code:
< script >meron isang = dokumento. getElementById ( 'demo' ) . may kapansanan ;
dokumento. getElementById ( 'sample' ) . panloobHTML = a ;
script >
Sa code sa itaas:
- Ang variable ' a 'Gumagamit ng' document.getElementById() ” paraan upang ma-access ang checkbox gamit ang id nitong “demo” at iugnay ang “ may kapansanan ” property upang suriin kung ang kinuhang checkbox ay hindi pinagana o hindi.
- Ang 'document.getElementById()' na paraan na inilapat ay muling kinukuha ang kasamang walang laman na talata at ipinapakita ang status ng 'disabled' na property bilang isang talata.
Output
Tulad ng nasuri, ibinabalik ng kinalabasan ang nakatalagang katayuan na 'checkbox' ibig sabihin, ' totoo ”.
Halimbawa 3: I-disable at I-un-Disable ang Checkbox Gamit ang Input Checkbox na 'disabled' Property
Bukod sa pagtatakda at pagbabalik ng katayuan ng checkbox, pinapayagan din ng property na “disabled” ang mga user na i-disable at i-un-disable ang checkbox nang sabay-sabay. Tingnan natin ito nang praktikal.
HTML Code
Suriin natin ang nakasulat na HTML code:
< istilo ng katawan = 'text-align: center' >< h2 > HTML DOM Input Checkbox hindi pinagana ang Property sa JavaScript h2 >
Checkbox : < uri ng input = 'checkbox' id = 'demo' > Naisumite ang Form input >< br >< br >
< button sa pag-click = 'checkDisable()' > Huwag paganahin ang checkbox pindutan >
< button sa pag-click = 'checkUndisable()' > Huwag paganahin ang checkbox pindutan >
Sa itaas na bloke ng code:
- Gayundin, magsama ng checkbox at magdagdag ng button na may ' onclick 'kaganapang nagsasagawa ng' checkDisable() ” function sa pag-click sa pindutan.
- Pagkatapos nito, idinagdag ang pangalawang pindutan na gumagamit din ng 'onclick' na tagapangasiwa ng kaganapan para sa pagpapatupad ng ' checkUndisable() ” function kapag nag-click ang button.
JavaScript Code
Susunod, dumaan sa nakasaad na code sa ibaba:
< iskrip >function checkDisable ( ) {
dokumento. getElementById ( 'demo' ) . may kapansanan = totoo ;
}
function checkI-undisable ( ) {
dokumento. getElementById ( 'demo' ) . may kapansanan = mali ;
}
iskrip >
Sa mga linya ng code sa itaas:
- Tukuyin ang isang function na pinangalanang ' checkDisable() 'na nalalapat ang' document.getElementById() ” paraan upang lapitan ang checkbox sa pamamagitan ng id nitong “demo” at itakda ang halaga nito sa “true”.
- Ang pangalawang function ' checkUndisable() 'Muling inilalapat ng function na 'document.getElementById()' ang paraan upang ma-access muli ang checkbox at itakda ang halaga nito sa 'false' kung mag-click ang user sa kasamang pangalawang button na pinangalanang 'I-undisable ang checkbox'.
Output
'Hindi pinapagana' ng output ang ibinigay na checkbox kapag nag-click ang user sa unang button at 'i-un-disable' ito kung nag-click ang user sa pangalawang button nang naaayon.
Konklusyon
Sa JavaScript, ang HTML DOM Input Checkbox “ may kapansanan Tinutulungan ng ” property ang mga user na itakda at ibalik ang naka-check na status ng “checkbox”. Tinutukoy nito ang mga pangkalahatang syntax para sa parehong 'set' at 'return' na mga proseso. Gumagana ang set syntax nito sa dalawang halaga ' totoo 'at' mali ”. Sa kabilang banda, ang return syntax nito ay hindi nangangailangan ng anumang parameter. Ipinakita ng artikulong ito ang layunin, gumagana, at praktikal na pagpapatupad ng HTML DOM Input Checkbox na property na “disabled” sa JavaScript.