Atributo disabled do HTML
O atributo disabled é um atributo boolean que especifica que o elemento deve estar desativado. Saiba mais sobre este atributo e em quais elementos ele pode ser utilizado.
O atributo disabled do HTML é um atributo boolean e especifica que o elemento deve estar desativado.
Este atributo pode ser usado para impedir o uso do elemento até que alguma condição seja satisfeita, como marcar uma caixa de seleção. Quando presente, o elemento não responde às ações do usuário e não pode receber foco. Além disso, controles de formulário desativados não são enviados com o formulário. É possível tornar o elemento utilizável novamente removendo o atributo disabled com JavaScript. O atributo disabled é comumente exibido em cinza.
Você pode usar o atributo disabled nos seguintes elementos: <button>, <fieldset>, <input>, <optgroup>, <option>, <select> e <textarea>.
Quando o atributo disabled é aplicado a um elemento, a pseudo-classe :disabled também se aplica a ele, permitindo estilizar controles desativados em CSS. Os elementos que suportam o atributo disabled mas não o têm definido correspondem à pseudo-classe :enabled.
Sintaxe
<tag disabled></tag>Por ser um atributo boolean, a simples presença do disabled o ativa. Não é necessário um valor; disabled, disabled="" e disabled="disabled" são todos equivalentes. Para desativá-lo, remova o atributo completamente.
disabled vs. readonly
Ambos os atributos impedem que o usuário altere um controle de formulário, mas se comportam de maneiras muito diferentes. Escolher o errado é uma fonte comum de bugs, especialmente quando o valor de um campo ainda precisa chegar ao servidor.
| Comportamento | disabled | readonly |
|---|---|---|
| Valor enviado com o formulário | Não | Sim |
| Pode receber foco pelo teclado | Não | Sim |
| Aparece editável (cursor, seleção de texto) | Não (cinza) | Sim |
Corresponde a :disabled / :read-only | :disabled | :read-only |
| Anunciado por leitores de tela | Frequentemente ignorado | Anunciado normalmente |
| Funciona em todos os tipos de controle | <input>, <select>, <textarea>, <button>, etc. | apenas <input> e <textarea> semelhantes a texto |
Use disabled quando o controle deve ficar completamente inativo e seu valor deve ser ignorado. Use readonly quando quiser que o usuário veja (e copie) um valor mas não o edite, enviando-o ainda assim com o formulário.
Acessibilidade
Um elemento desativado é removido da ordem de tabulação, não pode ser clicado e frequentemente é ignorado por tecnologias assistivas. Isso o torna fácil de ignorar: um usuário de leitor de tela navegando por um formulário pode nunca saber que existe um botão "Enviar" desativado, ou o motivo disso.
Se você quiser que um controle pareça e aja como indisponível, mas ainda seja focalizável e anunciado, use o atributo aria-disabled="true" em vez do atributo nativo disabled. Com aria-disabled, o controle permanece na ordem de tabulação e é anunciado como "esmaecido/indisponível", mas você deve impedir sua ação em JavaScript — o navegador não bloqueará cliques nem o envio do formulário por você.
Como regra geral: use disabled nativo para controles que verdadeiramente não devem participar, e recorra ao aria-disabled quando manter o elemento descobrível for mais importante do que a proteção incorporada.
Exemplos por elemento
Exemplo do atributo disabled do HTML usado no 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>Exemplo do atributo disabled do HTML usado no 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>Quando um <fieldset> é desativado, todos os controles de formulário descendentes também são desativados, exceto os controles de formulário dentro do elemento <legend>.
Exemplo do atributo disabled do HTML usado no 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>Exemplo do atributo disabled do HTML usado no 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>Exemplo do atributo disabled do HTML usado no 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>Exemplo do atributo disabled do HTML usado no 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>Exemplo do atributo disabled do HTML usado no 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>Alternando disabled com JavaScript
Um padrão comum é manter um controle desativado até que o usuário faça algo — por exemplo, ativar um botão "Enviar" somente após marcar uma caixa de seleção. Em JavaScript, todo controle de formulário expõe uma propriedade boolean disabled. Defina-a como true para desativar o elemento e false para ativá-lo:
<!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>Definir element.disabled = true adiciona o atributo, e element.disabled = false o remove. Observe que a propriedade é um boolean, não a string "disabled", portanto sempre atribua true ou false.