禁用复选框上的输入

时间:2014-10-16 16:25:15

标签: jquery html checkbox input

取消选中复选框时需要禁用输入,并在选中时启用它。

我的代码是这样的:

<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>

但我想禁用并启用对应于复选框的选择输入。如果用户单击第一个复选框,则启用第一个输入,并对第二个和第三个执行相同操作。

2 个答案:

答案 0 :(得分:8)

一个简单的解决方案:

&#13;
&#13;
$(".mySelect").prop("disabled", true);

$("input:checkbox").on("change", function () {
    $(this).next().prop("disabled", !$(this).prop("checked"));
});
&#13;
<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>
&#13;
&#13;
&#13;

<强>参考

.next()

.prop()

答案 1 :(得分:0)

如果你想使用纯CSS路线,你可以编写一个CSS,当取消选中复选框时,可以更改opacitypointer-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>

标签问题

为了阻止某人选择加入输入,您可以将tabindex="-1"添加到输入中。