我有两个输入字段,如果另一个输入字段中有值,我希望另一个输入字段被禁用。我尝试使用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);
});
});
现在它将同时起作用。