OBJETIVO: crear un script que deshabilite otras listas desplegables de selección usando la misma clase ("selectClass") si se selecciona un elemento de una de las selecciones desplegables. O bien, si el elemento no está seleccionado, todas las selecciones desplegables se vuelven seleccionables nuevamente para permitir que las personas cambien de opinión o no entiendan al principio lo que sucederá.

El objetivo es permitir que un usuario solo pueda seleccionar un elemento (total) de X cantidad de listas posibles: puede tener manzanas, naranjas o pares, pero solo puede tener un tipo de fruta (para este ejemplo)

PROBLEMA: No puedo volver a seleccionar la lista después de que se haya realizado una selección, incluso si se selecciona la opción predeterminada sin valor.

ESFUERZOS: He dedicado algunas horas a este guión y he llegado tan lejos como parece. Revisé Stack, busqué en Google y busqué en otros foros y tablones de anuncios, y en Reddit. Encontré algunas cosas que esperaba que me ayudaran a alcanzar mi meta, pero no pude entenderlas debido a mi novedad, o no eran lo suficientemente aplicables para ayudarme a alcanzar mi meta. Ejecuté el script a través de validadores de javascript para asegurarme de tener la sintaxis correcta, etc. Logré llegar bastante lejos hacia mi objetivo (el objetivo era simplemente desactivar los otros menús desplegables), pero me gustaría hacer el experiencia de usuario de primer nivel, y para mí eso significa permitirles cambiar de opinión sin necesidad de volver a cargar una página y perder todos sus datos no enviados.

LA PREGUNTA: Espero ayuda y orientación para hacer que todo se pueda volver a seleccionar de nuevo deseleccionando el elemento seleccionado de la lista que deshabilitó las otras selecciones desplegables; Las listas se generarán dinámicamente.

EL CÓDIGO:

 <select class="selectClass"> <option value="">Apples</option> <option value="1">1 Apple</option> <option value="2">2 Apple</option> <option value="3">3 Apple</option> </select> <select class="selectClass"> <option value="">Oranges</option> <option value="1">1 Orange</option> <option value="2">2 Orange</option> <option value="3">3 Orange</option> </select> <select class="selectClass"> <option value="" >Pears</option> <option value="1">1 Pears</option> <option value="2">2 Pears</option> <option value="3">3 Pears</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function () { $(".selectClass").on('change', function () { $(".selectClass").not($(this)).prop("disabled", "disabled") }) }) </script>