HTML check: Bad value X for attribute “disabled” on element “Y”.

About This HTML Issue

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

<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

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