Bu makale, JavaScript'te HTML DOM Girişi Onay Kutusu 'devre dışı' özelliğinin amacını, çalışmasını ve kullanımını göstermektedir.
HTML DOM Girişi Onay Kutusu 'devre dışı' Özelliği JavaScript'te Nasıl Çalışır?
giriş onay kutusu ' engelli ” özelliği, “checkbox” özelliğine bağlıdır. Verilen onay kutularını devre dışı bırakmak ve devre dışı bırakmak için HTML formları ve giriş alanları üzerinde çalışır.
Sözdizimi (Devre dışı bırakılan Özelliği ayarlayın)
checkboxObject. engelli = doğru | YANLIŞTanımlanan dönüş sözdizimine göre, “disabled” özelliği aşağıdaki gibi listelenen iki parametreyi destekler:
- doğru: İlgili onay kutusunun devre dışı bırakıldığını gösterir.
- yanlış (Varsayılan değer): İlgili onay kutusunun devre dışı bırakılmadığını gösteren isteğe bağlı bir değerdir.
İade (Devre dışı bırakılan Mülkü iade et)
checkboxObject. engelliYukarıdaki sözdiziminde, “ onay kutusuNesne ” HTML'ye karşılık gelir “ onay kutusu ” öğesi.
'Disabled' özelliğinin pratik uygulamasını anlamak için aşağıdaki örneklerde yukarıda tanımlanan söz dizimlerini kullanalım.
Örnek 1: Giriş Onay Kutusu “devre dışı” Özelliğini Uygulama Temel Söz Dizimini Kullanma
İlk örnekte, tanımlanmış genelleştirilmiş sözdizimini kullanarak devre dışı bırakmak için “onay kutusu” eklenmiştir.
HTML Kodu
İlk olarak, verilen HTML kodunu analiz edin:
< vücut sitili = 'metin hizalama: merkez' >
< h2 > HTML DOM Girişi onay kutusu JavaScript'te devre dışı bırakılmış Özellik h2 >
onay kutusu : < giriş tipi = 'onay kutusu' İD = 'demo' > Form Gönderildi < br >< br >
< P > Verilen onay kutusu devre dışı bırakıldı P >
Yukarıdaki kod satırlarında:
- “
” etiketi, “ ile hizalanan gövde bölümünü belirtir. merkez '' yardımıyla stil ' bağlanmak. - “ ” etiketi 2. seviyenin alt başlığını tanımlar.
- “
” etiketi, giriş tipini belirterek bir “onay kutusu” oluşturur “ onay kutusu ” atanmış bir kimliğe sahip olmak ” gösteri ”. - “ ” etiketi, ortaya çıkan sonucu görüntülemek için bir paragraf öğesi ekler.
JavaScript Kodu
Ardından, JavaScript koduna bakın:
< senaryo >belge. getElementById ( 'demo' ) . engelli = doğru ;
senaryo >
Yukarıdaki kod parçacığında, “ Document.getElementById() ” yöntemi, “demo” kimliğini kullanarak onay kutusunu getirmek için uygulanır ve “devre dışı” özelliğinin değeri “ olarak ayarlanır. doğru ” onay kutusunu devre dışı bırakır.
Çıktı
Yukarıdaki çıktı, verilen onay kutusunun ' nedeniyle devre dışı bırakıldığını onaylar. engelli ” özellik “ olarak ayarlandı doğru ”.
Örnek 2: Giriş Onay Kutusu 'devre dışı' Özellik Değerini Döndürme
Bu örnek, hedeflenen onay kutusunun durumunu bir boole değeri (doğru/yanlış) olarak döndürmek için 'devre dışı' özelliğini uygular.
HTML Kodu
Aşağıdaki HTML kodunu göz önünde bulundurun:
< vücut sitili = 'metin hizalama: merkez' >< h2 > HTML DOM Girişi onay kutusu JavaScript'te devre dışı bırakılmış Özellik h2 >
onay kutusu : < giriş tipi = 'onay kutusu' engelli = doğru İD = 'demo' > Form Gönderildi < br >< br >
< p kimliği = 'örnek' > P >
Yukarıdaki kod bloğunda:
- Onay kutusu atanır ve “ durumu engelli ” özellik “ olarak ayarlandı doğru ”.
- Bundan sonra boş bir ' ” öğesi, çıktıyı eklemek için atanmış bir “örnek” kimliğiyle eklenir.
JavaScript Kodu
Şimdi, JavaScript koduna geçin:
< senaryo >var a = belge. getElementById ( 'demo' ) . engelli ;
belge. getElementById ( 'örnek' ) . içHTML = A ;
senaryo >
Yukarıdaki kodda:
- Değişken ' A ”, “ Document.getElementById() 'demo' kimliğini kullanarak onay kutusuna erişmek ve ' engelli Getirilen onay kutusunun devre dışı olup olmadığını kontrol etmek için ” özelliği.
- Tekrar uygulanan “document.getElementById()” yöntemi, dahil edilen boş paragrafı getirir ve “disabled” özelliğinin durumunu bir paragraf olarak görüntüler.
Çıktı
Analiz edildiği gibi sonuç, 'onay kutusu' tahsis durumunu döndürür, yani ' doğru ”.
Örnek 3: Giriş Onay Kutusu “disabled” Özelliğini Kullanarak Onay Kutusunu Devre Dışı Bırakma ve Devre Dışı Bırakma
Onay kutusu durumunu ayarlayıp döndürmenin yanı sıra, 'disabled' özelliği, kullanıcıların onay kutusunu aynı anda devre dışı bırakmasına ve devre dışı bırakmasına olanak tanır. Uygulamalı olarak görelim.
HTML Kodu
Yazılan HTML kodunu inceleyelim:
< vücut sitili = 'metin hizalama: merkez' >< h2 > HTML DOM Girişi onay kutusu JavaScript'te devre dışı bırakılmış Özellik h2 >
onay kutusu : < giriş tipi = 'onay kutusu' İD = 'demo' > Form Gönderildi giriş >< br >< br >
< tıklama düğmesi = 'checkDisable()' > onay kutusunu devre dışı bırak düğme >
< tıklama düğmesi = 'checkUndisable()' > onay kutusunu devre dışı bırak düğme >
Yukarıdaki kod bloğunda:
- Benzer şekilde, bir onay kutusu ekleyin ve ' tıklamada ' yürüten olay' checkDisable() ” düğmesine tıklandığında işlev görür.
- Bundan sonra, “onclick” olay işleyicisini “” yürütmesi için de kullanan ikinci düğme eklenir. checkUndisable() ” butonu tıklandığında çalışır.
JavaScript Kodu
Ardından, aşağıda belirtilen kodu gözden geçirin:
< senaryo >fonksiyon kontrolü Devre Dışı Bırak ( ) {
belge. getElementById ( 'demo' ) . engelli = doğru ;
}
işlev denetimi Devre dışı bırakılamaz ( ) {
belge. getElementById ( 'demo' ) . engelli = YANLIŞ ;
}
senaryo >
Yukarıdaki kod satırlarında:
- “ adlı bir işlev tanımlayın. checkDisable() geçerli olan “ Document.getElementById() 'Demo' kimliği aracılığıyla onay kutusuna yaklaşma ve değerini 'true' olarak ayarlama yöntemi.
- İkinci işlev ' checkUndisable() ' işlevi, onay kutusuna tekrar erişmek için 'document.getElementById()' yöntemini tekrar uygular ve kullanıcı, 'Onay kutusunu devre dışı bırak' adlı eklenmiş ikinci düğmeye tıklarsa değerini 'false' olarak ayarlar.
Çıktı
Çıktı, kullanıcı birinci düğmeye tıkladığında verilen onay kutusunu 'devre dışı bırakır' ve kullanıcı buna göre ikinci düğmeyi tıklarsa 'devre dışı bırakır'.
Çözüm
JavaScript'te, HTML DOM Girişi Onay Kutusu ' engelli ” özelliği, kullanıcıların “onay kutusu”nun kontrol edilen durumunu ayarlamasına ve döndürmesine yardımcı olur. Hem “set” hem de “return” süreçleri için genelleştirilmiş sözdizimlerini tanımlar. Set sözdizimi iki değer üzerinde çalışır ' doğru ' Ve ' YANLIŞ ”. Öte yandan, dönüş sözdizimi herhangi bir parametre gerektirmez. Bu makale, JavaScript'te HTML DOM Giriş Onay Kutusu 'devre dışı' özelliğinin nesnel, çalışan ve pratik uygulamasını gösterdi.