# Bad value X for attribute “disabled” on element “Y”.

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

`disabled` is a boolean attribute, so on every element that accepts it you write it bare, empty or as `disabled="disabled"`, and a value like `"true"` or `"false"` is an error.

A boolean attribute can only hold the empty string or its own name, in any letter case. So `disabled`, `disabled=""`, `disabled="disabled"` and `disabled="DISABLED"` all pass. The validator reports any other value with this message and quotes what it found: `"true"`, `"false"`, `"1"`, `"yes"`, `"disabled "` with a trailing space, and also `"disabled"` with quote marks inside the value. That last one shows up as `“"disabled"”` and comes from markup like `disabled='"disabled"'` or `disabled=""disabled""`, usually a template that wraps an already quoted value in another pair of quotes.

Browsers don't read the value. If the attribute is there, the element is disabled, so `disabled="false"` disables it just as `disabled="true"` does. To enable the element, remove the attribute. In JavaScript, set the property (`field.disabled = false`) or call `removeAttribute("disabled")`. Calling `setAttribute("disabled", "false")` leaves the element disabled.

The bad value usually comes from a form builder or template that prints a boolean setting straight into the markup, often with `aria-disabled="true"` next to it. The validator also warns that `aria-disabled` is unnecessary on an element that has `disabled`, so remove it while you're there.

Elements that don't take `disabled` at all, such as `<div>` or `<a>`, get a different error: `Attribute “disabled” not allowed on element “div” at this point.` Remove the attribute there instead of fixing its value.

What `disabled` does depends on the element:

- `<input>`, `<select>`, `<textarea>` and `<button>`: the control can't be focused or used, and the browser leaves its name and value out of the submitted form data. It also skips validation, so a `required` field stops blocking the form while it's disabled. If the user shouldn't edit a field but the server still needs its value, use `readonly` on a text `<input>` or a `<textarea>`, since read-only fields are submitted. `<select>` has no `readonly` attribute, so send its value in a hidden `<input>` instead.
- `<option>` and `<optgroup>`: a disabled option is greyed out and can't be picked, and `disabled` on an `<optgroup>` disables every option inside it. A common use is the placeholder at the top of a drop-down, such as "Choose a size", marked `disabled selected` so it shows first but can't be chosen again. In a `required` `<select>`, give it `value=""` as well, so the browser treats it as a placeholder and won't submit the form until the user picks a real option.
- `<fieldset>`: disables every form control inside it, except the ones in its first `<legend>`. A checkbox in the legend can therefore switch the rest of the group on and off.
- `<link>`: `disabled` is only allowed together with `rel="stylesheet"`, and the browser doesn't load or apply that stylesheet until the attribute is removed. It's used for alternative stylesheets, such as a high-contrast theme, that a script turns on later with `link.disabled = false`.

## Invalid example

```html
<form action="/order" method="post">
  <label for="size">Size</label>
  <select id="size" name="size" required>
    <option value="" disabled="true" selected>Choose a size</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
  </select>

  <label for="coupon">Coupon code</label>
  <input type="text" id="coupon" name="coupon" disabled="false">

  <fieldset id="address" disabled="disabled ">
    <legend>
      <label>
        <input type="checkbox" id="ship-elsewhere">
        Ship to a different address
      </label>
    </legend>
    <label for="street">Street</label>
    <input type="text" id="street" name="street">
  </fieldset>

  <button type="submit">Place order</button>
</form>
```

## Valid example

```html
<form action="/order" method="post">
  <label for="size">Size</label>
  <select id="size" name="size" required>
    <option value="" disabled selected>Choose a size</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
  </select>

  <label for="coupon">Coupon code</label>
  <input type="text" id="coupon" name="coupon">

  <fieldset id="address" disabled>
    <legend>
      <label>
        <input type="checkbox" id="ship-elsewhere">
        Ship to a different address
      </label>
    </legend>
    <label for="street">Street</label>
    <input type="text" id="street" name="street">
  </fieldset>

  <button type="submit">Place order</button>
</form>

<script>
  document.getElementById("ship-elsewhere").addEventListener("change", (event) => {
    document.getElementById("address").disabled = !event.target.checked;
  });
</script>
```