javascript - 复选框禁用更改时的一些选择

Question

您好，我动态生成了带有复选框和选择的表。现在我想禁用/启用对复选框更改的选择。

我寻找它的脚本，但我发现的所有内容都不适合我。

这是我的代码:

<script>
            function toggleSelection(e){
                var el = '#tsh' + e;
                var el1 = '#tsm' + e;
                var el2 = '#teh' + e;
                var el3 = '#tem' + e;
                if ($(this).is(':checked')) {
                    $(el).attr('disabled', 'disabled');
                    $(el1).attr('disabled', 'disabled');
                    $(el2).attr('disabled', 'disabled');
                    $(el3).attr('disabled', 'disabled');
                } else {
                    $(el).removeAttr('disabled');
                    $(el1).removeAttr('disabled');
                    $(el2).removeAttr('disabled');
                    $(el3).removeAttr('disabled');
                }
            }
        </script>
        <tr class="form-group">
            <td><label><input type="checkbox" name="day[]" value="{value}" id="dc{value}" onchange="toggleSelection('{value}')" {chk}> {name}</label></td>
            <td><select id="tsh{value}" class="form-control" {dis} name="tsh{value}" style="display: inline-block; width: 100%">
            </select></td>
            <td><select id="tsm{value}" class="form-control" {dis} name="tsm{value}" style="display: inline-block; width: 100%">
            </select></td>
            <td><select id="teh{value}" class="form-control" {dis} name="teh{value}" style="display: inline-block; width: 100%">
            </select></td>
            <td><select id="tem{value}" class="form-control" {dis} name="tem{value}" style="display: inline-block; width: 100%">
            </select></td>
        </tr>

当然，选择之间还有选项。该代码可以工作，但只能以一种方式启用它，但不想禁用它们。

Answer 1

我建议你这样做:

$(':checkbox').on('change', function () {
    $(this).closest('tr').find('select').prop('disabled', this.checked);
});

Demo