Enable disabled select input with JavScript

July 13, 2022

I would like to enable a select input that is disabled using JavaScript.

I have tried doing this using:

document.querySelector("#radius").disabled = false;

And also:

document.querySelector("#radius").removeAttribute("disabled");

Neither of these has worked.

The markup for the select input is:

<select name="radius" id="radius" readonly>
   <option value="all">All distances</option>
      <optgroup label="Miles">
        <option value="5mi" disabled>5 miles</option>
        <option value="10mi" disabled>10 miles</option>
        <option value="20mi" disabled>20 miles</option>
    </optgroup>
    <optgroup label="Kilometers">
        <option value="5km" disabled>5 kilometers</option>
        <option value="10km" disabled>10 kilometers</option>
        <option value="20km" disabled>20 kilometers</option>
    </optgroup>
</select>

>Solution :

It looks like the options are disabled, but you are trying to enable the select itself. The queryselector modifies the object that you are selecting and not its children. They have to be referred to separately.

Here is a javascript loop that sets the options as not disabled.

Also According to MDN about read only

The attribute is not supported or relevant to select or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image.

let opts = document.querySelectorAll("#radius [disabled]");

opts.forEach(function(e){
 e.disabled = false;
});

<select name="radius" id="radius" readonly>
   <option value="all">All distances</option>
      <optgroup label="Miles">
        <option value="5mi" disabled>5 miles</option>
        <option value="10mi" disabled>10 miles</option>
        <option value="20mi" disabled>20 miles</option>
    </optgroup>
    <optgroup label="Kilometers">
        <option value="5km" disabled>5 kilometers</option>
        <option value="10km" disabled>10 kilometers</option>
        <option value="20km" disabled>20 kilometers</option>
    </optgroup>
</select>