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>
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>Either assign an ID to each option or leverage the value to catch it. querySelector will then work fine.
#radius as it is is identifying the tag, not the nested actual tag of the value you want, hence it not working. You need to go down one in nesting if you want to leverage the #radius as shown in the first example. Otherwise if it is an option give each option a specific ID.
By Option Value
document.querySelector("#radius option[value='5mi']").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>By adding an ID to the option (using 5km as the example againn).
document.querySelector("#radius option[value='5mi']").disabled= false;
document.querySelector("#radius-opt-1").disabled= false;<select name="radius" id="radius" readonly>
<option value="all">All distances</option>
<optgroup label="Miles">
<option id="radius-opt-1" 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>