Atributo disabled de HTML
El atributo disabled es un atributo boolean que especifica que el elemento debe estar deshabilitado. Conoce este atributo y los elementos en los que se puede usar.
El atributo disabled de HTML es un atributo boolean y especifica que el elemento debe estar deshabilitado.
Este atributo se puede usar para impedir el uso del elemento hasta que se cumpla alguna condición, como marcar una casilla de verificación. Cuando está presente, el elemento no responde a las acciones del usuario y no puede recibir el foco. Además, los controles de formulario deshabilitados no se envían junto con el formulario. Es posible volver a hacer que el elemento sea utilizable eliminando el atributo disabled con JavaScript. El atributo disabled generalmente aparece en gris.
Puedes usar el atributo disabled en los siguientes elementos: <button>, <fieldset>, <input>, <optgroup>, <option>, <select> y <textarea>.
Cuando el atributo disabled se aplica a un elemento, la pseudo-clase :disabled también se aplica a él, por lo que puedes dar estilo a los controles deshabilitados en CSS. Los elementos que admiten el atributo disabled pero que no lo tienen establecido coinciden con la pseudo-clase :enabled.
Sintaxis
<tag disabled></tag>Dado que disabled es un atributo boolean, su mera presencia lo activa. No necesitas ningún valor; disabled, disabled="" y disabled="disabled" son todos equivalentes. Para desactivarlo, elimina el atributo por completo.
disabled vs. readonly
Ambos atributos impiden que el usuario modifique un control de formulario, pero se comportan de manera muy diferente. Elegir el incorrecto es una fuente habitual de errores, especialmente cuando el valor de un campo todavía necesita llegar al servidor.
| Comportamiento | disabled | readonly |
|---|---|---|
| El valor se envía con el formulario | No | Sí |
| Puede recibir el foco con el teclado | No | Sí |
| Parece editable (cursor, selección de texto) | No (en gris) | Sí |
Coincide con :disabled / :read-only | :disabled | :read-only |
| Anunciado a los lectores de pantalla | A menudo se omite | Se anuncia con normalidad |
| Funciona en todo tipo de controles | <input>, <select>, <textarea>, <button>, etc. | solo <input> de tipo texto y <textarea> |
Usa disabled cuando el control deba estar completamente inactivo y su valor deba ignorarse. Usa readonly cuando quieras que el usuario vea (y copie) un valor pero no lo edite, mientras sigue enviándose con el formulario.
Accesibilidad
Un elemento deshabilitado se elimina del orden de tabulación, no se puede hacer clic en él y, a menudo, las tecnologías de asistencia lo omiten. Esto hace que sea fácil pasarlo por alto: un usuario de lector de pantalla que navega por un formulario con la tecla Tab puede que nunca sepa que existe un botón "Enviar" deshabilitado ni el motivo.
Si deseas que un control parezca y actúe como no disponible pero que aún sea enfocable y anunciado, utiliza el atributo aria-disabled="true" en lugar del atributo nativo disabled. Con aria-disabled, el control permanece en el orden de tabulación y se anuncia como "atenuado/no disponible", pero debes impedir su acción tú mismo en JavaScript — el navegador no bloqueará los clics ni el envío del formulario por ti.
Como regla general: usa el disabled nativo para controles que verdaderamente no deben participar, y recurre a aria-disabled cuando mantener el elemento detectable importa más que la protección incorporada.
Ejemplos por elemento
Ejemplo del atributo disabled de HTML usado en el elemento <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Button</button> <br /><br />
<button type="button" disabled>Disabled button</button>
</body>
</html>Ejemplo del atributo disabled de HTML usado en el elemento <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 22px;
}
</style>
</head>
<body>
<form>
<fieldset disabled>
<legend>Personal Information:</legend>
<div>
<label>First Name:</label>
<input type="text" />
</div>
<div>
<label>Last Name:</label>
<input type="text" />
</div>
<div>
<label>Date of birth:</label>
<input type="text" />
</div>
</fieldset>
</form>
</body>
</html>Cuando un <fieldset> está deshabilitado, todos los controles de formulario descendientes también quedan deshabilitados, excepto los controles de formulario dentro del elemento <legend>.
Ejemplo del atributo disabled de HTML usado en el elemento <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name" />
<input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
<input type="submit" value="Submit" />
</form>
</body>
</html>Ejemplo del atributo disabled de HTML usado en el elemento <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Ejemplo del atributo disabled de HTML usado en el elemento <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet" disabled>Tablet</option>
</select>
</form>
</body>
</html>Ejemplo del atributo disabled de HTML usado en el elemento <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select disabled>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Ejemplo del atributo disabled de HTML usado en el elemento <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
</form>
</body>
</html>Activar y desactivar disabled con JavaScript
Un patrón habitual es mantener un control deshabilitado hasta que el usuario haga algo; por ejemplo, habilitar un botón "Enviar" solo cuando se marca una casilla de verificación. En JavaScript, cada control de formulario expone una propiedad boolean disabled. Establécela en true para deshabilitar el elemento y en false para habilitarlo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label>
<input type="checkbox" id="agree" /> I accept the terms
</label>
<br /><br />
<button id="submit" type="button" disabled>Submit</button>
<script>
const agree = document.getElementById("agree");
const submit = document.getElementById("submit");
agree.addEventListener("change", function () {
// Enable the button only while the checkbox is checked
submit.disabled = !agree.checked;
});
</script>
</body>
</html>Establecer element.disabled = true añade el atributo, y element.disabled = false lo elimina. Ten en cuenta que la propiedad es un boolean, no la string "disabled", por lo que siempre se debe asignar true o false.