Aulos Barcelona “Hybrid” mouthpiece for clarinet

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
         // Obtener todos los contenedores con clase 'value'
    var valueContainers = document.querySelectorAll('.variations_form.cart .value');

    // Iterar sobre cada contenedor
    valueContainers.forEach(function(container) {
        // Obtener el select dentro del contenedor actual
        var select = container.querySelector('select');

        // Obtener todos los divs con role 'radio' dentro del contenedor actual
        var radios = container.querySelectorAll('[role="radiogroup"] > div');

        // Función para actualizar las clases de los divs con role 'radio' según el estado del option
        function updateRadioClasses() {
            radios.forEach(function(radio) {
                // Obtener el valor del div con role 'radio'
                var radioValue = radio.getAttribute('value');

                // Obtener el option correspondiente al valor del div actual
                var option = select.querySelector('option[value="' + radioValue + '"]');

                // Verificar si el option está deshabilitado o si no existe
                if (!option || option.disabled) {
                    // Añadir la clase 'disable' al div
                    radio.classList.add('disable');
                } else {
                    // Quitar la clase 'disable' del div
                    radio.classList.remove('disable');
                }
            });
        }

        // Escuchar el evento change en el select dentro del contenedor actual
        select.addEventListener('change', updateRadioClasses);

        // Observar los cambios en los options utilizando MutationObserver
        var observer = new MutationObserver(updateRadioClasses);
        observer.observe(select, { childList: true, subtree: true, attributes: true });

        // Llamar a la función para inicializar las clases de los divs con role 'radio' al cargar la página
        updateRadioClasses();
    });
    }, 20); // Esperar un segundo antes de ejecutar el script
});

  
</script>