当特定输入字段聚焦时,jQuery禁用输入字段
Posted
技术标签:
【中文标题】当特定输入字段聚焦时,jQuery禁用输入字段【英文标题】:jQuery disable input field when specific input field is focused 【发布时间】: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>
【问题讨论】:
向第二个文本框添加文本时会发生什么?第一个应该禁用? 是的。如果您将文本放在另一个文本框中,另一个将被禁用 【参考方案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()
事件中执行此操作的,因此即使您删除了输入,它也会起作用。
【讨论】:
以上是关于当特定输入字段聚焦时,jQuery禁用输入字段的主要内容,如果未能解决你的问题,请参考以下文章
JQuery Mobile:单击文本字段时如何禁用默认键盘?
如何通过javascript或jquery将输入字段聚焦在Android浏览器上