Estoy tratando de deshabilitar todos los tipos de entrada en un formulario cuando uno de ellos está marcado o lleno con un valor.
Cuando se marca una de las casillas, se deshabilitarán los otros dos campos, lo mismo para el texto de entrada.
Aquí un poco de código prueba:
HTML
<form action=""> <input type="text" id="name"/> <input type="checkbox" id="days" name="days" /> <input type="checkbox" id="months" name="months" /> </form>JS
function disableInput(e) { if(e.target.value !== 0) { document.getElementById("days").disabled = true; document.getElementById("months").disabled = true; }else { document.getElementById("days").disabled = false; document.getElementById("months").disabled = false; } } const name = document.querySelector('#name'); name.addEventListener('input', disableInput);¿Cómo puedo manejar esto en Vanilla JS?
El evento de input burbujeará. Así que escuche ese evento en el elemento <form> para capturar toda la actividad en las entradas.
Cuando se activa el evento, verifique el tipo de evento y si el value está vacío o si la propiedad checked es igual a true , según el valor del type .
Luego recorra todas las entradas en el formulario. Todas sus entradas se pueden encontrar en la propiedad de elements en el formulario. En el ciclo, deshabilite todas las entradas excepto la que está usando actualmente.
Restaurar todas las entradas cuando no se cumpla la condición anterior.
const form = document.querySelector('form'); function disableInputs(exception) { for (const input of form.elements) { if (input !== exception) { input.disabled = true; } } } function enableInputs() { for (const input of form.elements) { input.disabled = false; } } form.addEventListener('input', event => { const { target } = event; if ( (target.type === 'text' && target.value !== '') || (target.type === 'checkbox' && target.checked === true) ) { disableInputs(target); } else { enableInputs(); } }); <form action=""> <input type="text" id="name" /> <input type="checkbox" id="days" name="days" /> <input type="checkbox" id="months" name="months" /> </form> function lockOut(e) { this.querySelectorAll("input:not(#" + e.srcElement.id + ")").forEach(function(elem) { if (e.srcElement.type !== "text") elem.disabled = !elem.disabled; else if (e.srcElement.value.length > 0) elem.disabled = true; else elem.disabled = false; }); } document.querySelector("form").addEventListener("input", lockOut); <form action=""> <input type="text" id="name" /> <input type="checkbox" id="days" name="days" /> <input type="checkbox" id="months" name="months" /> </form>Esta es mi solución simple:
const allInputs = document.querySelectorAll('.radio-input'); allInputs.forEach((input) => { input.addEventListener('input', (e) => { let value; switch(e.target.type) { case 'checkbox': value = e.target.checked; break; case 'text': value = e.target.value; break; } const needDisable = !(value === '' || value === false); allInputs.forEach((input) => { if (input === e.target) { input.disabled = false; return; } input.disabled = needDisable; }) }); }); <form action=""> <input type="text" class="radio-input" id="name"/> <input type="checkbox" class="radio-input" id="days" name="days" /> <input type="checkbox" class="radio-input" id="months" name="months" /> </form>