I'm attempting to disable an input while the user is filling another input. I've managed to disable one of the two inputs while the other input is being filled in.

The problem is that I want the disabled input to ONLY be disabled WHILE the other input is being typed in. So if the user changes their mind on the 1st input, they can delete what is in the current input which makes the 2nd input available and the 1st disabled.

JS

var inp1 = document.getElementById("input1");
inp1.onchange = function () {
   if (this.value != "" || this.value.length > 0) {
      document.getElementById("input2").disabled = true;
   }
}

HTML

<input type="text" id="input1">
<input type="text" id="input2">

I'm attempting to disable an input while the user is filling another input. I've managed to disable one of the two inputs while the other input is being filled in.

The problem is that I want the disabled input to ONLY be disabled WHILE the other input is being typed in. So if the user changes their mind on the 1st input, they can delete what is in the current input which makes the 2nd input available and the 1st disabled.

JS

var inp1 = document.getElementById("input1");
inp1.onchange = function () {
   if (this.value != "" || this.value.length > 0) {
      document.getElementById("input2").disabled = true;
   }
}

HTML

<input type="text" id="input1">
<input type="text" id="input2">

• javascript
• html

• 1 User can't type in 2 places at same time. Behavior logic doesn't make sense. – charlietfl Commented Dec 7, 2017 at 18:27
• 2 It sounds like the idea is to disable the first input as long as the second input contains text and vise versa. The absence of text in either would give the user the option to edit either field if I understand correctly. – ThisClark Commented Dec 7, 2017 at 18:29
• What doesn't make sense? If the user types in one input, the other is disabled. If the user changes their mind and delete contents of that one input then the other input is re-enabled. – Sterling King Commented Dec 7, 2017 at 18:29
• Note that with an input as this, this.value != "" || this.value.length > 0 is just a long way to write this.value.length > 0 (or a long way to write this.value != ""). :-) – T.J. Crowder Commented Dec 7, 2017 at 18:29
• Nothing in the quoted code ever sets disabled back to false when the input is blank. – T.J. Crowder Commented Dec 7, 2017 at 18:31

4 Answers 4

First, I would use input rather than change. Then, you need to set disabled back to false if the input is blank. Your check for whether it's blank is redundant, you just neither either side of your ||, not both. (I'd also use addEventListener rather than assigning to an .onxyz property, so that it plays nicely with others. :-) )

So:

var inp1 = document.getElementById("input1");
inp1.addEventListener("input", function () {
    document.getElementById("input2").disabled = this.value != "";
});

<input type="text" id="input1">
<input type="text" id="input2">

...and then of course if you want it to be mutual, the same for input2.

You can achieve this using focus and blur. Below it is done with JQuery.

$(function() {
    $('#input1').focus(function(){
      $('#input2').prop('disabled', 'disabled');
    }).blur(function(){
     $('#input2').prop('disabled', '');
    });
    
    $('#input2').focus(function(){
      $('#input1').prop('disabled', 'disabled');
    }).blur(function(){
     $('#input1').prop('disabled', '');
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1">
<input type="text" id="input2">

How about using keyup?

Like this;

var inp1 = document.getElementById("input1");

var inp2 = document.getElementById("input2");

inp1.onkeyup = function() { inputValidation(this, inp2); }

inp2.onkeyup = function() { inputValidation(this, inp1); }

function inputValidation(origin, lock) {
  var response = hasValue(origin.value);
  lock.disabled = response;
}

function hasValue(value) {
  return value != "" && value.length > 0;
}

https://jsfiddle/8o3wwp6s/

Don't make it harder than it is, this is simple.

var one = document.getElementById('one');
var two = document.getElementById('two');

//checks instantly 
var checker = setInterval(function() {
    if(two.value !== '') {
      one.disabled = true;
    } else {
      //when its clear, it enabled again
      one.disabled = false;
    }
    if(one.value !== '') {
      two.disabled = true
    } else {
      two.disabled = false;
    }
}, 30);

<input id="one">
<input id="two">