Tengo este código, se trata de deshabilitar y habilitar un botón de un formulario de acuerdo con la entrada de su casilla de verificación. Se está ejecutando en diferentes páginas, puede ver las dos últimas líneas donde recorro los formularios en la página, todo funciona bien cuando hay uno en la página, sin embargo, en las páginas donde hay más de un formulario, no funciona. No importa qué casilla de verificación marque (la segunda o la tercera, por ejemplo), siempre afecta al primer botón.
puede notar que hay dos declaraciones "console.log", la primera devuelve el elemento de entrada correcto (por lo que cuando hay dos formularios en las páginas, puede ver en la consola que los elementos hacen referencia a las entradas correctas en el DOM), sin embargo , el segundo siempre muestra un elemento en la consola que hace referencia a la primera entrada en el DOM.
Supongo que hay algo mal con la forma en que agrego el detector de eventos, ¿alguna sugerencia para que funcione?
class Steps { constructor(el) { this.el = el; this.bindDOM(); this.bindStepEvents(); } bindDOM() { this.checkboxSelectorStep = this.el.querySelector('.radio-selector-steps-enable'); this.submit = this.el.querySelector('button[type=submit]'); } bindStepEvents() { console.log(this.checkboxSelectorStep); // returns the correct element this.checkboxSelectorStep.addEventListener('click', (ev) => { console.log(this.checkboxSelectorStep); // always returns the first element if (ev.target.checked) { this.submit.removeAttribute('disabled'); } else { this.submit.setAttribute('disabled', ''); } }); } } const forms = Array.from(document.querySelectorAll('.radio-selector-steps-form')); forms.map(form => new Steps(form)); <form method="get" class="radio-selector-steps-form"> <input type="checkbox" name="checkbox-selector-step" id="checkbox-selector-step" class="radio-selector-steps-enable"> <label for="checkbox-selector-step"><span>some text</span></label> <button type="submit" disabled="">button text</button> </form> <form method="get" class="radio-selector-steps-form"> <input type="checkbox" name="checkbox-selector-step" id="checkbox-selector-step" class="radio-selector-steps-enable"> <label for="checkbox-selector-step"><span>some text</span></label> <button type="submit" disabled="">button text</button> </form>El problema era que ambas entradas tenían la misma identificación, y las etiquetas hacen referencia a esa identificación, por lo que presionar la entrada en sí funciona bien, pero cada vez que se hace clic en la etiqueta, se llama al primer oyente.
(debido al estilo, en mi caso no era posible hacer clic en la entrada, por lo que siempre terminaba con un comportamiento incorrecto hasta que intentaba crear un fragmento SO y detectaba el problema)
Esperando que esto pueda ayudar a alguien.
Debe usar querySelector All en lugar de querySelector
bindDOM() { this.checkboxSelectorStep = this.el.querySelectorAll(STEPS_ENABLE_CHKBOX); this.submit = this.el.querySelector(STEPS_FORM_SUBMIT); } bindStepEvents() { console.log(this.checkboxSelectorStep); this.checkboxSelectorStep.forEach(function(elem) { elem.addEventListener('click', (ev) => { console.log(this.checkboxSelectorStep); if (ev.target.checked) { this.submit.removeAttribute('disabled'); this.update(JSON.parse(this.steps[0].primaryInput.value)) } else { this.submit.setAttribute('disabled', ''); } }); });