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

Sobre este problema HTML

Em HTML, os atributos booleanos funcionam de forma diferente do que você poderia esperar das linguagens de programação. Eles não aceitam "true" ou "false" como valores. Em vez disso, a presença do atributo significa que está ativo, e a sua ausência significa que está inativo. Isto está definido no WHATWG HTML Living Standard, que estabelece que o valor de um atributo booleano deve ser ou a string vazia ou uma correspondência insensível a maiúsculas/minúsculas para o nome do atributo.

Isto significa que existem exatamente três formas válidas de escrever o atributo disabled:

disabled (sem valor)
disabled="" (string vazia)
disabled="disabled" (nome do atributo como valor)

Qualquer outro valor — incluindo "true", "false", "yes", "no", ou "1" — é inválido e irá gerar um erro de validação W3C.

Um mal-entendido comum e perigoso é que disabled="false" fará com que um elemento não fique desabilitado. Não fará. Porque os atributos booleanos são ativados apenas pela sua presença, disabled="false" ainda desabilita o elemento. O browser vê que o atributo disabled está presente e trata o elemento como desabilitado, ignorando completamente o valor "false". Isto pode levar a bugs confusos onde os elementos parecem permanentemente desabilitados.

Este problema afeta todos os elementos que suportam o atributo disabled, incluindo <input>, <button>, <select>, <textarea>, <fieldset>, <optgroup>, e <option>. As mesmas regras aplicam-se a outros atributos booleanos como checked, readonly, required, autofocus, e hidden.

Por que isto é importante

Conformidade com standards: Usar valores de atributo inválidos viola a especificação HTML e produz erros de validação W3C.
Manutenibilidade: Os programadores que leiam disabled="true" ou disabled="false" podem interpretar mal a intenção, especialmente se assumirem que "false" remove o estado desabilitado.
Armadilhas de frameworks: Alguns frameworks JavaScript definem dinamicamente disabled="true" ou disabled="false" como valores string. Quando o HTML renderizado chega ao browser, ambos os valores resultam num elemento desabilitado, o que raramente é o comportamento pretendido.

Como corrigir

Para desabilitar um elemento, adicione o atributo disabled sem valor, ou use disabled="" ou disabled="disabled".
Para habilitar um elemento, remova o atributo disabled completamente. Não o defina como "false".
Em JavaScript, use a propriedade DOM element.disabled = true ou element.disabled = false, ou use element.removeAttribute('disabled') para habilitá-lo. Evite element.setAttribute('disabled', 'false').

Exemplos

❌ Inválido: usar `"true"` e `"false"` como valores

<form>
  <input type="text" disabled="true">
  <select disabled="false">
    <option>Option A</option>
  </select>
  <button type="submit" disabled="true">Submit</button>
</form>

Tanto os valores "true" como "false" são inválidos. Adicionalmente, disabled="false" ainda desabilita o elemento <select>, o que quase certamente não era o que se pretendia.

✅ Válido: uso correto de atributo booleano

<form>
  <input type="text" disabled>
  <select>
    <option>Option A</option>
  </select>
  <button type="submit" disabled="disabled">Submit</button>
</form>

Aqui, o <input> e o <button> estão desabilitados usando sintaxe válida. O <select> está habilitado porque o atributo disabled foi removido completamente.

✅ Válido: alternar o estado disabled com JavaScript

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

Usar a propriedade DOM disabled (um booleano real) é a forma correta de alternar o estado desabilitado dinamicamente. Isto evita a armadilha de definir valores string como "true" ou "false" no atributo.