HTMLOptGroupElement.disabled — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptGroupElement.disabled

Beschreibung

Die Eigenschaft disabled der Schnittstelle HTMLOptGroupElement spiegelt das HTML-Attribut disabled eines <optgroup>-Elements wider. Ist sie true, lassen sich alle Optionen innerhalb der Gruppe nicht mehr auswählen – unabhängig davon, ob die einzelnen <option>-Elemente selbst gesperrt sind.

Typische Einsatzfälle sind abhängige Auswahllisten: Je nach Tarif, Region oder Benutzerrolle werden ganze Gruppen von Optionen dynamisch freigeschaltet oder gesperrt, ohne dass jede Option einzeln angefasst werden muss.

Das Setzen auf true fügt das Attribut disabled (mit leerem Wert) hinzu, das Setzen auf false entfernt es. Umgekehrt liefert das Lesen true, sobald das Attribut vorhanden ist – egal mit welchem Wert, auch bei disabled="false".

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das disabled-Attribut gesetzt ist und die Gruppe gesperrt ist; sonst false. Schreibbar.

Beispiele

Status einer Gruppe auslesen

// HTML:
// <select id="auto">
//   <optgroup label="Benziner"><option>Golf</option></optgroup>
//   <optgroup label="Elektro" disabled><option>ID.3</option></optgroup>
// </select>
const gruppen = document.querySelectorAll('#auto optgroup');
gruppen.forEach((g) => console.log(`${g.label}: ${g.disabled}`));

Benziner: false Elektro: true

Gruppe abhängig von einer Checkbox freischalten

// HTML:
// <label><input type="checkbox" id="premium"> Premium-Kunde</label>
// <select id="versand">
//   <optgroup label="Standard"><option>DHL</option></optgroup>
//   <optgroup label="Express" id="express" disabled><option>Same Day</option></optgroup>
// </select>
const premium = document.getElementById('premium');
const express = document.getElementById('express');
const select = document.getElementById('versand');

premium.addEventListener('change', () => {
  express.disabled = !premium.checked;
  // Falls eine nun gesperrte Option ausgewählt war: zurücksetzen
  if (select.selectedOptions[0]?.parentElement === express && express.disabled) {
    select.selectedIndex = 0;
  }
  console.log('Express gesperrt:', express.disabled);
});

Express gesperrt: false (nach Anhaken)

Zusammenhang zwischen Eigenschaft und Attribut

const og = document.createElement('optgroup');
og.label = 'Test';

og.disabled = true;
console.log(og.outerHTML);

og.setAttribute('disabled', 'false');
console.log(og.disabled); // Attribut vorhanden => true

og.disabled = false;
console.log(og.hasAttribute('disabled'));

<optgroup label="Test" disabled=""></optgroup> true false

// Wichtig · Fallstricke

Attributwert egal: disabled="false" sperrt die Gruppe trotzdem. Zum Freigeben die Eigenschaft auf false setzen oder removeAttribute('disabled') verwenden.
Einzelne Optionen: option.disabled bleibt false, auch wenn die übergeordnete Gruppe gesperrt ist. Den tatsächlichen Zustand prüft man z. B. mit option.matches(':disabled').
Bereits ausgewählte Option: Das Sperren einer Gruppe hebt eine vorhandene Auswahl nicht automatisch auf; der Wert wird weiterhin mit dem Formular übermittelt. Gegebenenfalls die Auswahl manuell zurücksetzen.
Keine Sicherheitsfunktion: Gesperrte Optionen lassen sich über die Entwicklerwerkzeuge wieder aktivieren – Eingaben immer serverseitig prüfen.
Darstellung gesperrter Gruppen (ausgegraut) variiert je nach Browser und Betriebssystem, besonders bei nativen Auswahllisten auf Mobilgeräten. Die Eigenschaft selbst wird von allen gängigen Browsern unterstützt.

Siehe auch

HTMLOptGroupElement.label HTMLOptionElement.disabled HTMLButtonElement.disabled HTMLInputElement.disabled HTMLStyleElement.disabled