jquery - 禁用复选框上的输入

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