disabled: attributo HTML

L'attributo booleano disabled, quando presente, rende l'elemento non mutevole, focalizzabile o addirittura inviato con il modulo. L'utente non può né modificare né concentrarsi sul controllo, né sui suoi discendenti del controllo modulo.

Se l'attributo disabled è specificato su un controllo modulo, l'elemento e i suoi discendenti del controllo modulo non partecipano alla convalida del vincolo. Spesso i browser disattivano tali controlli e non riceveranno alcun evento di navigazione, come i clic del mouse o quelli relativi alla messa a fuoco.

L'attributo disabled è supportato da <button>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> e <input>.

Questo attributo booleano disabilitato indica che l'utente non può interagire con il controllo o con i suoi controlli discendenti. Se questo attributo non è specificato, il controllo eredita la sua impostazione dall'elemento contenitore, ad esempio <fieldset>; se non è presente alcun elemento contenitore con l'attributo disabled impostato e il controllo stesso non ha l'attributo, il controllo è abilitato. Se dichiarato su un <optgroup>, la selezione è ancora interattiva (se non diversamente disabilitato), ma nessuno degli elementi nel gruppo di opzioni è selezionabile.

Nota: se un <fieldset> è disabilitato, i controlli dei moduli discendenti sono tutti disabilitati, ad eccezione dei controlli dei moduli all'interno di <legend>.

Quando a un elemento di supporto è applicato l'attributo disabled, anche la pseudo-classe :disabled si applica ad esso. Al contrario, gli elementi che supportano l'attributo disabled ma non hanno l'attributo impostato corrispondono alla pseudo-classe :enabled.

Questo attributo booleano impedisce all'utente di interagire con il pulsante. Se questo attributo non è impostato, il pulsante può comunque essere disabilitato da un elemento contenitore, ad esempio <fieldset>; se non è presente alcun elemento contenitore con l'attributo disabled impostato, il pulsante è abilitato.

Firefox, a differenza di altri browser, manterrà lo stato disabilitato dinamico di un <button> attraverso il caricamento su più pagine. Utilizzare l'attributo autocomplete per controllare questa funzione.

Interazioni di attributi

La differenza tra disabled e readonly è che i controlli di sola lettura possono ancora funzionare e sono ancora attivabili, mentre i controlli disabilitati non possono ricevere lo stato attivo e non vengono inviati con il modulo e generalmente non funzionano come controlli finché non vengono abilitati.

Poiché non è possibile modificare il valore di un campo disabilitato, required non ha alcun effetto sugli input con l'attributo disabled specificato. Inoltre, poiché gli elementi diventano immutabili, la maggior parte degli altri attributi, ad esempio pattern, non ha alcun effetto finché il controllo non viene abilitato.

Nota: l'attributo required non è consentito sugli input con l'attributo disabled specificato.

Usabilità

I browser visualizzano i controlli dei moduli disabilitati in grigio poiché i controlli dei moduli disabilitati sono immutabili, non riceveranno lo stato attivo o alcun evento di navigazione, come i clic del mouse o quelli relativi allo stato attivo, e non vengono inviati con il modulo.

Se presente su un elemento di supporto, la pseudo classe :disabled corrisponderà. Se l'attributo non è incluso, la pseudo classe :enabled corrisponderà. Se l'elemento non supporta l'attributo disabilitato, l'attributo non avrà alcun effetto, incluso il fatto di non essere abbinato alle pseudo classi :disabled e :enabled.

Convalida dei vincoli

Se l'elemento è disabled, il valore dell'elemento non può ricevere lo stato attivo, non può essere aggiornato dall'utente e non partecipa alla convalida del vincolo.

Esempi

Quando i controlli dei moduli sono disabilitati, molti browser li visualizzeranno in un colore più chiaro e disattivato per impostazione predefinita. Di seguito sono riportati esempi di caselle di controllo, pulsanti di opzione <option> e <optgroup>, nonché alcuni controlli del modulo disabilitati tramite l'attributo disabilitato impostato sull'elemento predecessore <fieldset>. <option> è disabilitato, ma <select> stesso non lo è. Avremmo potuto disabilitare l'intero <select> aggiungendo l'attributo a quell'elemento anziché ai suoi discendenti.

<fieldset>
  <legend>Checkboxes</legend>
  <p><label>
    <input type="checkbox" name="chbox" value="regular">Regular
  </label></p>
  <legend>Checkboxes</legend>
  <p><label>
    <input type="checkbox" name="chbox" value="disabled" disabled>
    disabled
  </label></p>
</fieldset>

<fieldset>
  <legend>Radio buttons</legend>
  <p><label>
    <input type="radio" name="radio" value="regular">Regular
  </label></p>
  <legend>Checkboxes</legend>
  <p><label>
    <input type="radio" name="radio" value="disabled" disabled>
    disabled
  </label></p>
</fieldset>

<p>
  <label>Seleziona un'opzione
    <select>
      <optgroup label="Gruppo 1">
        <option>Opzione 1.1</option>
      <optgroup>
      <optgroup label="Gruppo 2">
        <option>Opzione 2.1</option>
        <option disabled>Opzione 2.2</option>
        <option>Opzione 2.3</option>
      <optgroup>
      <optgroup label="Gruppo 3" disabled>
        <option>Opzione 3.1</option>
        <option>Opzione 3.2</option>
        <option>Opzione 3.3</option>
      <optgroup>
    </select>
  </label>
</p>

<fieldset disabled>
  <legend>Fieldset disattivato</legend>
    <p>
      <label>Nome: <input type="name" name="radio" value="regular">Regular
      </label>
    </p>
    <p>
      <label>Numero: <input type="number" ></label>
    </p>
</fieldset>