我可以修改存储在数组中的输入的属性吗？

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);

然后，您可以在input1和input2上使用所有jquery方法，而不会出现任何问题。

演示：

​

$("#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>

​