禁用复选框输入答案

【问题标题】：disable input on check checkbox禁用复选框输入
【发布时间】：2014-12-12 02:42:54
【问题描述】：

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

我的代码是这样的：

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

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

【问题讨论】：

标签： jquery html checkbox input

【解决方案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()

【讨论】：

OP 想要 this 的倒数.. 需要更改为 !$(this).prop("checked")
使用input.mySelect:disabled { background: #eee; }，您可以使禁用的输入字段变暗。随意根据需要更改此 CSS。

【解决方案2】：

如果你想走纯 CSS 路线，你可以编写 CSS，在未选中复选框兄弟时更改 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"。

【讨论】：