禁用复选框上的输入
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了禁用复选框上的输入相关的知识，希望对你有一定的参考价值。
取消选中复选框时需要禁用输入，并在选中时启用它。
我的代码是这样的：
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>
但我想禁用并启用对应于复选框的选择输入。如果用户单击第一个复选框，则启用第一个输入，并对第二个和第三个执行相同操作。
答案
简单的解决方案：
$(".mySelect").prop("disabled", true);
$("input:checkbox").on("change", function () {
$(this).next().prop("disabled", !$(this).prop("checked"));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>另一答案
如果你想要纯CSS路线，你可以编写CSS，当取消选中复选框sibling时，它会更改opacity和pointer-events。
.y .myCheck:not(:checked) + .mySelect {
pointer-events: none;
opacity: 0.6;
}<div class="y">
<input type="checkbox" class="myCheck" />
<input type="text" tabindex="-1" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="text" tabindex="-1" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="text" tabindex="-1" name="x" class="mySelect" />
</div>以上是关于禁用复选框上的输入的主要内容，如果未能解决你的问题，请参考以下文章