Me gustaría habilitar una entrada de selección que está deshabilitada usando JavaScript.
He intentado hacer esto usando:
document.querySelector("#radius").disabled = false;Y también:
document.querySelector("#radius").removeAttribute("disabled");Ninguno de estos ha funcionado.
El marcado para la entrada de selección es:
<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>Parece que las opciones están deshabilitadas, pero está intentando habilitar la selección en sí. El queryselector modifica el objeto que está seleccionando y no sus elementos secundarios. Deben mencionarse por separado.
Aquí hay un bucle de javascript que establece las opciones como no deshabilitadas.
También según MDN sobre solo lectura
El atributo no es compatible ni relevante para los tipos de entrada o selección que ya no son mutables, como la casilla de verificación y la radio, o no pueden, por definición, comenzar con un valor, como el tipo de entrada del archivo. rango y color, ya que ambos tienen valores predeterminados. Tampoco se admite en oculto, ya que no se puede esperar que un usuario complete un formulario que está oculto. Tampoco es compatible con ninguno de los tipos de botones, incluida la imagen.
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>Asigne una ID a cada opción o aproveche el valor para capturarla. querySelector funcionará bien.
#radius tal como está identificando la etiqueta, no la etiqueta real anidada del valor que desea, por lo tanto, no funciona. Debe bajar uno en el anidamiento si desea aprovechar el #radius como se muestra en el primer ejemplo. De lo contrario, si es una opción, asigne a cada opción una identificación específica.
Por valor de opción
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>Agregando una identificación a la opción (usando 5 km como ejemplo nuevamente).
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>