JavaScript/DOM/Document/forms/elements/disabled

Aus SELFHTML-Wiki
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:

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
function wechsle_art () {
  if (document.Testform.auto[0].checked == true) {
    var deaktiviert = false;
  } else {
    var deaktiviert = true;
  }
  for (var i = 0; i < document.Testform.autoart.length; i++) {
    document.Testform.autoart[i].disabled = deaktiviert;
    document.Testform.autoart[i].checked = false;
  }
}
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 ausgegraut, wenn der Anwender "nein" wählt. Dazu haben die Radio-Buttons der ersten Gruppe einen Event-Handler onclick. Beim Klicken auf einen der beiden Radio- Buttons wird die Funktion wechsle_art() ausgeführt, die in einem Script-Bereich im Seitenkopf definiert ist. Sie fragt zunächst mit einer bedingten Anweisung ab, ob die Eigenschaft checked des ersten Radio-Buttons einen positiven Wert hat. Dementsprechend wird eine Variable namens deaktiviert auf true oder false gesetzt. Anschließend werden mit einer for-Schleife alle Radio-Buttons durchlaufen, die zur Gruppe mit dem Namen autoart gehören. Die disabled-Eigenschaft jedes dieser Radio-Buttons erhält den Wert, der in der Variable deaktiviert gespeichert ist. Die dazu verwendete Zugriffsmethode wird im Abschnitt Gruppenelemente erklärt. Auf diese Weise werden nacheinander alle fraglichen Radio-Buttons aktiviert, wenn der Anwender "ja" wählt, und sie werden deaktiviert, wenn der Anwender die erste Frage mit "nein" beantwortet.
  input:disabled {
    background: gainsboro;
  }
  input[value]:disabled {
    color: whitesmoke;
  }
    input:disabled + label {
    color: #666;
  }
Ü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.


Beachten Sie: Sie werden sich wundern, warum im Beispiel die Wahl des Event-Handlers auf onclick und nicht auf onchange fiel. In der Tat ist onchange 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 diesem Browserfehler wurde im Beispiel onclick statt onchange 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.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML