Javascript текстовое поле можно ввести 1

Question

У меня было 2 текстовых поля, но можно ввести только 1 и не могу ввести оба поля. Например, если я ввожу значение в input1, input2 отключен. если оба значения равны 0, оба поля отключены на false.

Любая помощь здесь?

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


function myFunction() {
  if (input1 != 0 && input2 == 0){
    document.getElementById("input2").disabled = true;
    //ALERT(1);
  }else if(input1 == 0 && input2 != 0){
    //ALERT(2);
    document.getElementById("input1").disabled = true;
  }else if(input1 == 0 && input2 == 0){
    //ALERT(3);
    document.getElementById("input1").disabled = false;
    document.getElementById("input2").disabled = false;
  }
}

<input id="input1" style="width: 100px;" type="number" min="0" value="0.00" onchange="myFunction()"/>
<input id="input2" style="width: 100px;" type="number" min="0" value="0.00" onchange="myFunction()"/>

Answer 1

Рассмотрим следующий пример кода.

$(function() {
  function isEmpty(fObj) {
    console.log($(fObj).val());
    return ($(fObj).val() == "" ? true : false);
  }

  $(".form").on("change blur", "input", function() {
    if (!isEmpty(this)) {
      $(".form input").not(this).prop("disabled", true);
    }
    if ($(this).val() == "0") {
      $(".form input").prop("disabled", false);
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
  <input id="input1" style="width: 100px;" type="number" min="0" value="0.00" />
  <input id="input2" style="width: 100px;" type="number" min="0" value="0.00" />
</div>

Вы можете использовать обратные вызовы change или blur и исследовать цель (this) события.

Answer 2

Вы можете использовать событие blur, которое происходит, когда элемент потерял фокус.

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

function myFunction() {
  input1.addEventListener("blur", event => {
    let value = event.target.value;
    input2.disabled = !!value && value != 0;
  });

  input2.addEventListener("blur", event => {
    let value = event.target.value;
    input1.disabled = !!value && value != 0;
  });
}

<input id="input1" style="width: 100px;" type="number" min="0" value="0.00" onchange="myFunction()" />
<input id="input2" style="width: 100px;" type="number" min="0" value="0.00" onchange="myFunction()" />