时间戳

首页 > 解决方案 > 我有一个带有多个复选框和选择选项的表单。如果单击复选框，我想启用选择选项

jquery - 我有一个带有多个复选框和选择选项的表单。如果单击复选框，我想启用选择选项

问题描述

我有一个包含多个字段的表单。每个字段都有一个选择选项和复选框。我想在单击复选框时启用选择选项。问题是，当我单击复选框时，所有禁用的选择选项都会启用。 

$("input:checkbox").click(function() {
    if ($(this).is(":checked") === true) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).attr("checked", false);
        $(this).attr("checked", true);
    } else {
        $(this).is(":checked", false);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<p>&nbsp;</p>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />

标签： jquery

解决方案

假设您的 html 如下所示：

<div>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />
    <select disabled="true">
        <option>foo</option>
        <option>bar</option>
    </select>
</div>
<div>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />
    <select disabled="true">
        <option>foo</option>
        <option>bar</option>
    </select>
</div>
<div>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />
    <select disabled="true">
        <option>foo</option>
        <option>bar</option>
    </select>
</div>

以下代码将启用与复选框分组的选择：

$("input:checkbox").click(function() {
    var checkbox = $(this);
    if (checkbox.is(":checked") === true) {        
        checkbox.parent().find("select").prop("disabled", false);
    } else {
          checkbox.parent().find("select").prop("disabled", true);
    }
});

请注意，可能有更好的方法来查找选择字段（如相应的 id），但这应该让您了解如何去做。

推荐阅读