Verificação HTML: Valor inválido ""disabled"" para o atributo "disabled" no elemento "input".

Sobre este problema HTML

Os atributos booleanos em HTML funcionam de forma diferente dos atributos regulares. A sua mera presença num elemento torna-os “true” (verdadeiros), e a sua ausência torna-os “false” (falsos). De acordo com a especificação HTML do WHATWG, um atributo booleano pode ter apenas três representações válidas:

Apenas o nome do atributo (por exemplo, disabled)
O atributo com um valor de string vazia (por exemplo, disabled="")
O atributo com o seu próprio nome como valor (por exemplo, disabled="disabled")

Qualquer outro valor — incluindo valores aparentemente intuitivos como "true", "yes" ou "no" — é inválido e fará com que o W3C HTML Validator reporte um erro como: Bad value “disabled” for attribute “disabled” on element “input” (ou uma mensagem semelhante referenciando qualquer valor inválido que tenha usado).

Porque isto é importante

Conformidade com standards: Usar valores inválidos viola a especificação HTML, o que pode levar a comportamentos imprevisíveis à medida que os browsers evoluem.

Comportamento enganador: Um erro comum é escrever disabled="false" e esperar que o input seja habilitado. Isto não funciona como esperado — porque o atributo ainda está presente, o elemento permanece desabilitado independentemente do valor. Isto pode levar a bugs confusos onde os programadores pensam que estão a habilitar um campo mas este permanece desabilitado.

Acessibilidade: As tecnologias assistivas dependem da interpretação do DOM dos atributos booleanos. Embora os browsers tipicamente lidem com valores inválidos graciosamente tratando qualquer atributo disabled presente como true, seguir valores válidos garante o comportamento mais consistente entre leitores de ecrã e outras ferramentas.

Templating e frameworks: Este problema surge frequentemente quando motores de templating ou frameworks JavaScript inserem valores string em atributos booleanos. Se o seu template produz disabled="true" ou disabled="false", deve em vez disso incluir ou omitir condicionalmente o atributo completamente.

Como corrigir

Remova o valor completamente — escreva apenas o nome do atributo sozinho.
Use uma string vazia — escreva disabled="" se as suas ferramentas requerem um valor explícito.
Use a forma canónica — escreva disabled="disabled" se precisar de compatibilidade XHTML.
Para habilitar um elemento, remova o atributo disabled completamente em vez de o definir como "false".

Exemplos

Uso incorreto

Todos estes desencadeiam um erro de validação porque os valores não são válidos para um atributo booleano:

<input type="text" disabled="yes">
<input type="text" disabled="true">
<input type="text" disabled="false">
<input type="text" disabled="1">
<button disabled="no">Submit</button>

Note que disabled="false" e disabled="no" ainda desabilitam o elemento — o browser vê que o atributo está presente e trata-o como true.

Uso correto

Todas estas são formas válidas de desabilitar um input:

<input type="text" disabled>
<input type="text" disabled="">
<input type="text" disabled="disabled">

Para ter um input habilitado, simplesmente omita o atributo:

<input type="text">

Lidar com valores dinâmicos em JavaScript

Se precisar de alternar o estado desabilitado dinamicamente, use a propriedade DOM em vez de definir um valor de atributo:

<form>
  <input type="text" id="username">
  <button type="button" id="toggle">Toggle</button>
  <script>
    document.getElementById("toggle").addEventListener("click", function () {
      var input = document.getElementById("username");
      input.disabled = !input.disabled;
    });
  </script>
</form>

Definir element.disabled = true ou element.disabled = false em JavaScript adiciona ou remove corretamente o atributo do DOM sem produzir markup inválido.

Outros atributos booleanos

Esta mesma regra aplica-se a todos os atributos booleanos em HTML, incluindo checked, readonly, required, hidden, autoplay, loop, muted, e outros. Por exemplo:

<!-- Incorreto -->

<input type="checkbox" checked="true">
<input type="email" required="required_field">

<!-- Correto -->

<input type="checkbox" checked>
<input type="email" required>

Quando tiver dúvidas, use a forma mais simples: apenas o nome do atributo sem valor. É a mais legível, a mais concisa, e totalmente conforme com a especificação HTML.