HTMLFieldSetElement.disabled — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFieldSetElement.disabled

Beschreibung

Die Eigenschaft disabled des HTMLFieldSetElement-Interfaces spiegelt das HTML-Attribut disabled des <fieldset>-Elements wider. Wird sie auf true gesetzt, fügt der Browser das Attribut hinzu. Bei false entfernt er es.

Ist ein Fieldset deaktiviert, gelten alle darin enthaltenen Formularelemente (<input>, <select>, <textarea>, <button> usw.) als deaktiviert. Ausgenommen sind nur Elemente im ersten <legend>-Kindelement des Fieldsets. Deaktivierte Felder lassen sich nicht fokussieren, lösen keine Klick-Ereignisse aus, werden nicht validiert und nicht mit dem Formular übertragen.

In der Praxis eignet sich die Eigenschaft gut, um ganze Formularabschnitte zu sperren: etwa während eine Anfrage gesendet wird, bis eine Checkbox wie „Abweichende Lieferadresse“ angehakt ist, oder für einen schreibgeschützten Ansichtsmodus. So muss man nicht jedes Feld einzeln umschalten.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das disabled-Attribut gesetzt ist, sonst false. Die Eigenschaft lässt sich auch beschreiben.

Beispiele

Lieferadresse per Checkbox freischalten

// HTML:
// <label><input type="checkbox" id="abweichend"> Abweichende Lieferadresse</label>
// <fieldset id="lieferadresse" disabled>
//   <input name="strasse" required>
//   <input name="plz" required>
// </fieldset>

const checkbox = document.querySelector('#abweichend');
const fieldset = document.querySelector('#lieferadresse');

checkbox.addEventListener('change', () => {
  fieldset.disabled = !checkbox.checked;
  console.log('Fieldset deaktiviert:', fieldset.disabled);
});

Fieldset deaktiviert: false (nach Anhaken)

Formular während des Sendens sperren

const form = document.querySelector('#kontakt');
const fieldset = form.querySelector('fieldset');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // Daten VOR dem Deaktivieren auslesen – deaktivierte Felder fehlen in FormData!
  const daten = new FormData(form);
  fieldset.disabled = true;
  try {
    await fetch('/api/kontakt', { method: 'POST', body: daten });
    console.log('Gesendet');
  } finally {
    fieldset.disabled = false;
  }
});

Gesendet

Eigenschaft und Attribut sind synchron

const fs = document.createElement('fieldset');
console.log(fs.disabled);                 // false
fs.disabled = true;
console.log(fs.hasAttribute('disabled')); // true
console.log(fs.outerHTML);
fs.removeAttribute('disabled');
console.log(fs.disabled);                 // false

false true <fieldset disabled=""></fieldset> false

// Wichtig · Fallstricke

Nicht übertragen: Felder in einem deaktivierten Fieldset fehlen in FormData und beim normalen Absenden. Wer die Felder nur sperren, aber trotzdem senden will, nutzt bei den einzelnen Feldern readOnly. Für ein Fieldset gibt es kein readonly-Attribut.
Die disabled-Eigenschaft der Kindelemente bleibt unverändert: input.disabled liefert weiterhin false, obwohl das Feld über das Fieldset deaktiviert ist. Zuverlässig prüft man das mit input.matches(':disabled').
Ausnahme beim Legend-Element: Steuerelemente im ersten <legend> bleiben bedienbar. Damit lässt sich zum Beispiel eine Umschalt-Checkbox direkt in die Legende setzen.
Jeder Wert wird in einen booleschen Wert umgewandelt: fs.disabled = 'false' deaktiviert das Fieldset, weil ein nicht leerer String als true gilt.
Die Deaktivierung gilt auch für verschachtelte Fieldsets. Zum Gestalten eignet sich die CSS-Pseudoklasse :disabled.
Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft. Ältere Versionen des Internet Explorer haben Felder in deaktivierten Fieldsets nicht zuverlässig gesperrt.

Siehe auch

HTMLFieldSetElement.name HTMLFieldSetElement.type HTMLFieldSetElement.elements HTMLFieldSetElement.form HTMLFieldSetElement.validity