[英]jQuery disable input field when specific input field is focused
我有两个输入字段,如果另一个有值,我希望禁用另一个。 我尝试使用 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>
你可以这样做:
$(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">
您可以使用change()
事件来做到这一点,例如
jQuery
$(document).ready(function(){
$("#selfEmployed").change(function(){
$("#fixedSalary").prop('disabled', true);
});
$("#fixedSalary").change(function(){
$("#selfEmployed").prop('disabled', true);
});
});
现在它将双向工作。
这正是您正在寻找的
$(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()
事件上执行此操作,因此即使您删除输入,它也会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.