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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-true-for-attribute-disabled-on-element-input
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes), 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

```html
<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

```html
<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

```html
<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.