JavaScript/DOM/Document/forms/elements/disabled

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

Anwendbar auf:

• Klick-Buttons
• einzeilige Eingabefelder
• mehrzeilige Eingabefelder
• Checkboxen
• Radio-Buttons
• Auswahllisten

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.

Beispiel

  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.
Allerdings 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.