禁用复选框上的输入

Question

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

我的代码是这样的：

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

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

Answer 1

简单的解决方案：

$(".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>

参考

.next()

.prop()

Answer 2

如果你想要纯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>

标签问题

为了阻止某人进入输入标签，您可以将tabindex="-1"添加到输入中。