En mi aplicación Flask, tengo una página con 5 cuadros de selección:
<select onchange="disableBtn()" id="first" name="select_first"> <option value="option1">Select an option</option> {% for each in list %} <option value="{{each}}">{{each}}</option> {% endfor %} </select>Me gustaría habilitar/deshabilitar el botón si solo uno de los cuadros de selección tiene una opción seleccionada.
function disableBtn() { var select = document.getElementById("first"); var selectedValue = select.options[select.selectedIndex].value; if (selectedValue == "option1") { document.getElementById("button").disabled = true; } else { document.getElementById("button").disabled = false; } }¿Cómo podría usar la misma función para todas las cajas? Probé con múltiples if pero solo funciona para el primero.
Puede agregar un oyente para el evento de cambio a todos los elementos seleccionados, que verifica si se seleccionó una opción aceptable para uno de los cuadros de selección.
Con querySelectorAll consulta todos los cuadros de selección.
Con some , itera sobre una matriz y verifica si una condición es verdadera para al menos un elemento.
const buttonElem = document.getElementById('button'); const selectElems = Array.from(document.querySelectorAll('select[name^="select_"]')); selectElems.forEach(elem => { elem.addEventListener('change', evt => { buttonElem.disabled = !selectElems.some(e => e.value !== 'option1'); }); });Si el botón solo debe activarse si se seleccionó exactamente un cuadro de selección, el código es el siguiente.
window.addEventListener('DOMContentLoaded', () => { const buttonElem = document.getElementById('button'); const selectElems = Array.from(document.querySelectorAll('select[name^="select_"]')); selectElems.forEach(elem => { elem.addEventListener('change', evt => { buttonElem.disabled = selectElems.filter(e => e.value !== 'option1').length !== 1; }); }); }); Se filtran todos los cuadros de selección para los que no se seleccionó "opción1". Si la longitud de la matriz resultante no es uno, el botón está deshabilitado.
El código está incrustado en un oyente que espera hasta que se carga todo el documento.