Hola, ¿hay alguna forma de deshabilitar varias opciones en un formulario de selección si solo elige una opción?
Por ejemplo:
Primer formulario de selección
<select name="secondchoice" id="second"> <option value="None">None</option> <option value="Content Dev">Content Dev</option> <option value="Web">Web</option> <option value="Science">Science</option> <option value="Managing">Managing</option> </select>Segundo formulario de selección
<select name="day2" id="exam2"> <option value="None">None</option> <option value="Monday">Monday</option> <option value="Tuesday">Tuesday</option> <option value="Wednesday">Wednesday</option> <option value="Thursday">Thursday</option> </select>Si selecciono "Ninguno" en el primer formulario, entonces el segundo formulario debe deshabilitar las opciones "Lunes-Jueves", la única opción disponible también debe ser "Ninguno" en el segundo formulario. ¡Gracias!
Puede hacer esto con javascript ocultando opciones en los segundos elementos siempre que el primer elemento seleccionado cambie al verificar su valor y ocultar elementos en consecuencia de esta manera:
// Select Elements const first = document.getElementById('first') const second = document.getElementById('second') // Option Elements const one = document.getElementById('one') const two = document.getElementById('two') // Runs whenever first select has changed first.onchange = () => { // Checks First Selects Value if (first.value === '1') { // If '1' then hide TWO and show ONE second.value = 'ONE' one.hidden = false two.hidden = true } else if (first.value === '2') { // Else, if '2' then hide ONE and show TWO second.value = 'TWO' one.hidden = true two.hidden = false } } <select id='first'> <option>1</option> <option>2</option> </select> <select id='second'> <option id='one'>ONE</option> <option id='two'>TWO</option> </select>Este es un ejemplo muy básico y se puede mejorar mucho.
puede hacer algo como a continuación, de modo que cuando seleccione ninguna, se deshabilitarán otras opciones y, aparte de ninguna, se habilitará nuevamente
function disabledEnabled(event) { var optiosLists = document.getElementById("exam2").options; for (let i = 0; i < optiosLists.length; i++) { if(event.target.value === "None"){ optiosLists[i].disabled = true; optiosLists[0].disabled = false; } else { optiosLists[i].disabled = false; } } }Puede disabled el elemento de selección en sí mismo y cada una de sus opciones. Puede encontrar 2 formas de lograr cada uno de los siguientes.