当特定输入字段聚焦时，jQuery禁用输入字段答案

【问题标题】：jQuery disable input field when specific input field is focused当特定输入字段聚焦时，jQuery禁用输入字段
【发布时间】：2020-07-19 04:23:58
【问题描述】：

我有两个输入字段，如果另一个有值，我希望禁用另一个。我使用 jQuery 进行了尝试，但没有任何反应。有人可以知道我该怎么做吗？谢谢

我的输入框

<ul>
<li id="fixedSalaryList"><b>Fixed Salary (Monthly)</b>
    <a href="#" class="show-input">$<?php echo $data['app1']['salary']; ?> <img src="<?php echo $dirimg; ?>/arrow-right.svg"></a>
    <input type="text" name="salary[]" id="fixedSalary" class="assest-input inputNumber" value="<?php echo $data['app1']['salary']; ?>" inputmode="numeric">
</li>
<li id="selfEmployedList"><b>Self-Employed Income (Annually)</b>
    <a href="#" class="show-input">$<?php echo $data['app1']['selfEmployedIncome']; ?><img src="<?php echo $dirimg; ?>/arrow-right.svg"></a>
    <input type="text" name="selfEmployedIncome[]" id="selfEmployed" class="assest-input inputNumber" value="<?php echo $data['app1']['selfEmployedIncome']; ?>" inputmode="numeric">
</li>
</ul>

jQuery

 $('input').on('input', function() {
    $(this).closest('li').find('input').not(this).prop('disabled', this.value.length)
  });

$('li input').on('input', function() {
    $(this).closest('li').find('input').not(this).prop('disabled', this.value.length)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="fixedSalaryList"><b>Fixed Salary (Monthly)</b>
    <a href="#" class="show-input">$</a>
    <input type="text" name="salary[]" id="fixedSalary" class="assest-input inputNumber"  inputmode="numeric">
</li>
<li id="selfEmployedList"><b>Self-Employed Income (Annually)</b>
    <a href="#" class="show-input">$</a>
    <input type="text" name="selfEmployedIncome[]" id="selfEmployed" class="assest-input inputNumber"  inputmode="numeric">
</li>
</ul>

【问题讨论】：

向第二个文本框添加文本时会发生什么？第一个应该禁用？
是的。如果您将文本放在另一个文本框中，另一个将被禁用

标签： javascript php jquery dom

【解决方案1】：

你可以这样做：

$(document).ready(function() {
  $("#fixedSalary").on("input", function() {
    if ($("#fixedSalary").val() != "") {
      $("#selfEmployed").prop('disabled', true);
    } else {
      $("#selfEmployed").prop('disabled', false);
    }
  });

  $("#selfEmployed").on("input", function() {
    if ($("#selfEmployed").val() != "") {
      $("#fixedSalary").prop('disabled', true);
    } else {
      $("#fixedSalary").prop('disabled', false);
    }
  });
});

$("#btnReset").click(function() {
  $("#fixedSalary").prop('disabled', false);
  $("#selfEmployed").prop('disabled', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="fixedSalaryList"><b>Fixed Salary (Monthly)</b>
    <a href="#" class="show-input">$</a>
    <input type="text" name="salary[]" id="fixedSalary" class="assest-input inputNumber" inputmode="numeric">
  </li>
  <li id="selfEmployedList"><b>Self-Employed Income (Annually)</b>
    <a href="#" class="show-input">$</a>
    <input type="text" name="selfEmployedIncome[]" id="selfEmployed" class="assest-input inputNumber" inputmode="numeric">
  </li>
</ul>

<input type="submit" text="Reset" id="btnReset">

【讨论】：

嗯。如果您输入其中任何一个文本，我希望禁用另一个文本框。基本上我只想要一个文本框。用户不允许在两个文本框中输入值
为什么当我清除另一个文本框时我不能在另一个文本框中输入内容
有 4 个文本框，所以我不明白您在说哪一个并且您的小提琴按预期工作，您需要什么？
如果我将文本放在另一个文本框上，我希望禁用另一个文本框，反之亦然。如果我清除文本框，它们都将再次启用。
哦，所以当您填写 fixed salary 时，您希望 selfemployed 被禁用，反之亦然，我的代码正在做其他方式，您是说吗？

【解决方案2】：

你可以通过change() 事件来做到这一点

jQuery

$(document).ready(function(){
  $("#selfEmployed").change(function(){
   $("#fixedSalary").prop('disabled', true);
  });

  $("#fixedSalary").change(function(){
   $("#selfEmployed").prop('disabled', true);
  });

});

现在它可以双向工作了。

【讨论】：

为此我已对其进行了编辑，我的答案请检查。
查看我的新答案。
不幸的是它不适合我。当我从另一个文本框中清除值时，它不会启用。但谢谢。我从对方那里得到了新的答案
@KunalRaut 这不适用于所有场景，它总是使文本框 true。
@KunalRaut 我想说的是，您正在使用change() 事件，您还应该检查输入类型是否为空！它没有这样做，对于每个 on change 事件，它都会使元素 disabled 为真。希望你明白我的意思。

【解决方案3】：

这正是你要找的东西

$(document).ready(function(){
  $("#selfEmployed").keyup(function(){
  if(!$("#selfEmployed").val()){
  $("#fixedSalary").prop('disabled', false);
  } 
  else {
   $("#fixedSalary").prop('disabled', true);
   }
});


  $("#fixedSalary").keyup(function(){
  if(!$("#fixedSalary").val()) {
  $("#selfEmployed").prop('disabled', false);
  } 
  else {
   $("#selfEmployed").prop('disabled', true);
   }
  }); 
});

注意：请记住，我们是在 keyup() 事件中执行此操作的，因此即使您删除了输入，它也会起作用。

【讨论】：