JavaScript/DOM/Document/forms/elements/disabled

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Document‎ | forms‎ | elements
Wechseln zu: Navigation, Suche

Die Eigenschaft disabled speichert, ob das Formularelement verfügbar oder ausgegraut ist. Entspricht dem disabled-Attribut. Mögliche Werte sind true oder false.

  • DOM 1.0
  • JavaScript 1.1
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • Nur Lesen / Read Only

Anwendbar auf:

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
  <form action="" name="testform">
     <p>Besitzen Sie ein Auto?</p>
   <fieldset id="auto">
     <label for="ja"> ja</label><input type="radio" name="auto" id="ja" >
     <label for="nein">nein</label><input type="radio" name="auto" id="nein" checked> 
   </fieldset>  

   <p>Falls ja, was für ein Auto?</p>

   <fieldset id="typ" disabled>
     <input type="radio" name="typenklasse" id="klein" ><label for="klein"> Kleinwagen</label><br>
     <input type="radio" name="typenklasse" id="kombi" value="kombi"><label for="kombi"> Kombi</label><br>
     <input type="radio" name="typenklasse" id="limo" value="limousine"><label for="limo"> Limousine</label><br>
     <input type="radio" name="typenklasse" id="sport" value="sportwagen"><label for="sport"> Sportwagen</label><br>
     <input type="radio" name="typenklasse" id="klein" value="kbus"><label for="bus"> Kleinbus</label><br>
     <input type="radio" name="typenklasse" id="sonstiges" value="andere"><label for="sonstiges"> sonstiges</label>
   </fieldset>

</form>
Das Beispiel enthält ein Formular mit zwei Gruppen von Radio-Buttons. In der ersten Gruppe kann der Anwender auswählen, ob er ein Auto besitzt oder nicht. In der zweiten Gruppe kann er, falls er ein Auto besitzt, den Typ angeben. Da die zweite Gruppe nur interessant ist, wenn der Anwender die Frage "Haben Sie ein Auto?" mit "ja" beantwortet hat, werden die Radio-Buttons der zweiten Gruppe mit dem disabled-Attribut ausgegraut.
  fieldset:disabled {
    color: whitesmoke;
	background: #ddd
  }
  fieldset:disabled label {
    color: #999;
  }
Über die dynamische Pseudoklasse disabled wird angezeigt, ob Elemente gesperrt (disabled) sind.
Sobald das JavaScript die Elemente sperrt, werden die Radiobuttons und auch die dazugehörenden label ausgegraut.
document.querySelector('#auto').addEventListener('click', abfrage);

function abfrage () { 
  if (document.querySelector('#ja').checked == true) {
    document.querySelector('#typ').disabled = false;
  } else {
    document.querySelector('#typ').disabled = true;   
  }
}
Die Radio-Buttons der ersten Gruppe haben einen Event-Handler click. Beim Klicken auf einen der beiden Radio-Buttons (im fieldset mit der ID auto) wird die Funktion abfrage() ausgeführt. Sie fragt zunächst mit einer bedingten Anweisung ab, ob die Eigenschaft checked des ersten Radio-Buttons einen positiven Wert hat. Falls ja, wird disabled auf false gesetzt und so entfernt.


Im anderen Falle, der nur eintritt, wenn auf nein geklickt wurde, wird disabled wieder auf true gesetzt und per CSS ausgegraut.


Beachten Sie: Sie werden sich wundern, warum im Beispiel die Wahl des Event-Handlers auf click und nicht auf change fiel. In der Tat ist change im Allgemeinen passender, um JavaScript auszuführen, wenn sich der Wert eines Formularelements ändert. Bei Radio-Buttons haben die Browser allerdings einige Fehler in Bezug auf den Event-Handler onchange. Der Internet Explorer 6 löst zwar ein solches Ereignis aus, sobald einer der Radio-Buttons z.B. durch einen Mausklick aktiviert wird. Das Ereignis wird jedoch bereits vor der tatsächlichen Aktivierung des gewählten Radio-Buttons ausgelöst. Somit liefert die Abfrage der checked-Eigenschaft unbrauchbare bzw. genau umgekehrte Werte. Wegen dieses Browserfehlers wurde im Beispiel click statt change gewählt. Glücklicherweise starten die gängigen Browser auch dann ein Klick-Ereignis, wenn nicht die Maus, sondern die Tastatur zum Ändern des Radio-Buttons verwendet wurde. Somit funktioniert das Beispiel auch bei der Bedienung des Formulars ausschließlich über die Tastatur oder durch einen Touch.