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

Question

我有两个输入字段，如果另一个有值，我希望禁用另一个。我使用 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>

Answer 1

你可以这样做：$(document).ready(function() {&nbsp; $("#fixedSalary").on("input", function() {&nbsp; &nbsp; if ($("#fixedSalary").val() != "") {&nbsp; &nbsp; &nbsp; $("#selfEmployed").prop('disabled', true);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $("#selfEmployed").prop('disabled', false);&nbsp; &nbsp; }&nbsp; });&nbsp; $("#selfEmployed").on("input", function() {&nbsp; &nbsp; if ($("#selfEmployed").val() != "") {&nbsp; &nbsp; &nbsp; $("#fixedSalary").prop('disabled', true);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $("#fixedSalary").prop('disabled', false);&nbsp; &nbsp; }&nbsp; });});$("#btnReset").click(function() {&nbsp; $("#fixedSalary").prop('disabled', false);&nbsp; $("#selfEmployed").prop('disabled', false);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul>&nbsp; <li id="fixedSalaryList"><b>Fixed Salary (Monthly)</b>&nbsp; &nbsp; <a href="#" class="show-input">$</a>&nbsp; &nbsp; <input type="text" name="salary[]" id="fixedSalary" class="assest-input inputNumber" inputmode="numeric">&nbsp; </li>&nbsp; <li id="selfEmployedList"><b>Self-Employed Income (Annually)</b>&nbsp; &nbsp; <a href="#" class="show-input">$</a>&nbsp; &nbsp; <input type="text" name="selfEmployedIncome[]" id="selfEmployed" class="assest-input inputNumber" inputmode="numeric">&nbsp; </li></ul><input type="submit" text="Reset" id="btnReset">

Answer 2

你可以通过这样的change()活动来做到这一点jQuery$(document).ready(function(){&nbsp; $("#selfEmployed").change(function(){&nbsp; &nbsp;$("#fixedSalary").prop('disabled', true);&nbsp; });&nbsp; $("#fixedSalary").change(function(){&nbsp; &nbsp;$("#selfEmployed").prop('disabled', true);&nbsp; });});现在它将双向工作。

Answer 3

这正是您正在寻找的$(document).ready(function(){&nbsp; $("#selfEmployed").keyup(function(){&nbsp; if(!$("#selfEmployed").val()){&nbsp; $("#fixedSalary").prop('disabled', false);&nbsp; }&nbsp;&nbsp; else {&nbsp; &nbsp;$("#fixedSalary").prop('disabled', true);&nbsp; &nbsp;}});&nbsp; $("#fixedSalary").keyup(function(){&nbsp; if(!$("#fixedSalary").val()) {&nbsp; $("#selfEmployed").prop('disabled', false);&nbsp; }&nbsp;&nbsp; else {&nbsp; &nbsp;$("#selfEmployed").prop('disabled', true);&nbsp; &nbsp;}&nbsp; });&nbsp;});注意：请记住，我们是在keyup()活动中执行此操作的，因此即使您删除输入，它也会起作用。