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>

当然，选择之间有选项。 Tis代码有效但只有一种方式可以选择，但不想禁用它们。

Answer 1

我建议你这样做：

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

Demo

Answer 2

尝试这样做：

$( yourElement ).prop('disabled', true);

Answer 3

写了一个简单的例子来演示如何根据是否选中复选框来启用/禁用select元素。

HTML：

<input type="checkbox" />
<select>
    <option>A</option>
    <option>B</option>
</select>

<select>
    <option>A</option>
    <option>B</option>
</select>

的javascript：

$(function(){
    $("input").on('change', function(){
         $("select").prop('disabled', $(this).prop('checked'));
    });
});

DEMO

希望这有帮助！

Answer 4

试试这个

$('.form-group input[type=checkbox]').click(function(){

    if($(this).is(':checked')) {
        $('.form-group select').attr('disabled', true);

    } else {

        $('.form-group select').attr('disabled', false);
    }

})

复选框禁用几个选择更改

4 个答案:

Demo