Могу ли я изменить атрибут ввода, хранящегося в массиве?

Question

Вот мой html

<form id="emailForm">
        <div class="textbox">
          <input type="email" id="email" name="email" placeholder="Nouvelle adresse e-mail">
          <span class="check-message hidden">REQUIS</span>
        </div>
        <div class="textbox">
           <input type="text" id="code" name="code" placeholder="Rentrez le code reçu">
           <span class="check-message hidden">REQUIS</span>
        </div>
        <input type="submit" value="Confirmer" class="login-btn" disabled>
      </form>

и мой jquery

$("#emailForm .textbox input").keydown(function() {
      var inputs = $("#emailForm .textbox input");
        if (inputs[0].value != "") {
          inputs[1].attr("disabled", true);
          inputs[1].addClass("disabled");
        } else if (inputs[1].value != "") {
          inputs[0].attr("disabled", true);
          inputs[0].addClass("disabled");
        } else if (inputs[0].value != "" && inputs[1].value) {
          inputs[0].attr("disabled", false);
          inputs[0].removeClass("disabled");
          inputs[1].attr("disabled", false);
          inputs[1].removeClass("disabled");
        }
    });

Я хочу отключить ввод, когда пользователь вводит другой. Можете ли вы помочь мне, пожалуйста?

Answer 1

Проблема здесь в том, что inputs[0] & inputs[1] - это элементы DOM, а не объекты jQuery, и все методы jquery, такие как .attr(), .addClass(), могут использоваться только на jQuery объектах, но не на элементах DOM. Вы можете исправить это, используя метод .eq(), чтобы получить элементы в виде jQuery объектов, таких как:

var input1 = inputs.eq(0);
var input2 = inputs.eq(1);

Затем вы можете использовать все методы jquery в input1 и input2 без проблем.

Демо:

$("#emailForm .textbox input").keydown(function() {
  var inputs = $("#emailForm .textbox input");
  
  var input1 = inputs.eq(0);
  var input2 = inputs.eq(1);
  
  if (input1.val() != "") {
    input2.attr("disabled", true);
    input2.addClass("disabled");
  } else if (input2.val() != "") {
    input1.attr("disabled", true);
    input1.addClass("disabled");
  } else if (input1.val() == "" || input2.val() == "") {
    input1.attr("disabled", false);
    input1.removeClass("disabled");
    input2.attr("disabled", false);
    input2.removeClass("disabled");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="emailForm">
  <div class="textbox">
    <input type="email" id="email" name="email" placeholder="Nouvelle adresse e-mail">
    <span class="check-message hidden">REQUIS</span>
  </div>
  <div class="textbox">
    <input type="text" id="code" name="code" placeholder="Rentrez le code reçu">
    <span class="check-message hidden">REQUIS</span>
  </div>
  <input type="submit" value="Confirmer" class="login-btn" disabled>
</form>