Bad value “true” for attribute “disabled” on element “input”.

In HTML, boolean attributes work differently than you might expect from programming languages. They don’t accept "true" or "false" as values. Instead, the presence of the attribute means it’s active, and its absence means it’s inactive. This is defined in the WHATWG HTML Living Standard, which states that a boolean attribute’s value must either be the empty string or a case-insensitive match for the attribute’s name.

This means there are exactly three valid ways to write the disabled attribute:

• disabled (no value)
• disabled="" (empty string)
• disabled="disabled" (attribute name as value)

Any other value — including "true", "false", "yes", "no", or "1" — is invalid and will trigger a W3C validation error.

A common and dangerous misunderstanding is that disabled="false" will make an element not disabled. It won’t. Because boolean attributes are activated by their presence alone, disabled="false" still disables the element. The browser sees the disabled attribute is present and treats the element as disabled, completely ignoring the "false" value. This can lead to confusing bugs where elements appear permanently disabled.

This issue affects all elements that support the disabled attribute, including <input>, <button>, <select>, <textarea>, <fieldset>, <optgroup>, and <option>. The same rules apply to other boolean attributes like checked, readonly, required, autofocus, and hidden.

Why this matters

• Standards compliance: Using invalid attribute values violates the HTML specification and produces W3C validation errors.
• Maintainability: Developers reading disabled="true" or disabled="false" may misunderstand the intent, especially if they assume "false" removes the disabled state.
• Framework pitfalls: Some JavaScript frameworks dynamically set disabled="true" or disabled="false" as string values. When the rendered HTML reaches the browser, both values result in a disabled element, which is rarely the intended behavior.

How to fix it

1. To disable an element, add the disabled attribute with no value, or use disabled="" or disabled="disabled".
2. To enable an element, remove the disabled attribute entirely. Don’t set it to "false".
3. In JavaScript, use the DOM property element.disabled = true or element.disabled = false, or use element.removeAttribute('disabled') to enable it. Avoid element.setAttribute('disabled', 'false').

Examples

❌ Invalid: using "true" and "false" as values

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

Both the "true" and "false" values are invalid. Additionally, disabled="false" still disables the <select> element, which is almost certainly not what was intended.

✅ Valid: correct boolean attribute usage

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

Here, the <input> and <button> are disabled using valid syntax. The <select> is enabled because the disabled attribute has been removed entirely.

✅ Valid: toggling disabled state with 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>

Using the disabled DOM property (a real boolean) is the correct way to toggle the disabled state dynamically. This avoids the pitfall of setting string values like "true" or "false" on the attribute.

Learn more:

MDN Reference

HTML input element - disabled attribute

→

MDN Reference

HTML disabled attribute

→

WHATWG Spec

WHATWG HTML - Forms

→