Disable input in a form when another input is filled in JS-CodePudding

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>

 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?

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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"  id="name"/>
   <input type="checkbox"  id="days" name="days" />
   <input type="checkbox"  id="months" name="months" />
</form>