I am trying to disable all input type in a form when one of them is checked or filled with a value.
When one of the checkbox is checked will disable the other two fields, same for the input text.
Here some code try:
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);
How can I manage this in vanilla JS?
The input event will bubble up. So listen for that event on the <form> element to capture all activity on the inputs.
When the event is triggered, check the type of event and if either the value is empty or the checked property equals true, depending on the type value.
Then loop over all the inputs in the form. All your inputs can be found in the elements property on the form. In the loop disable all the inputs except the one you're currently using.
Restore all the inputs when the aforementioned condition is not met.
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>This is my simple solution:
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>