Question

我有以下jQuery脚本，用于管理大型输入树视图，并能够启用/禁用某些输入。启用行时，应启用其文本框，反之亦然。

更新（工作）

这是我的剧本：

<script type="text/javascript">
    $(document).ready(function () {
        $('#cb-master').click(toggleCheckAll);
        $('#mappings input:checkbox[id^="cb"]').click(checkChildren);
        $('#mappings tbody tr[id^="child"] input:checkbox').change(toggleInputs);
    });

    function toggleCheckAll() {
        var selector = $(this).is(':checked')
                           ? '#mappings tbody input:checkbox:checked'
                           : '#mappings tbody input:checkbox:not(:checked)';

        $(selector).each(function () {
            $(this).trigger('click');
        });
    }

    function checkChildren() {
        var selector = ".child-of-" + $(this).closest('tr').attr('id');
        var isChecked = $(this).is(':checked') ? ':not(:checked)' : ':checked';
        $(selector).find('input:checkbox' + isChecked).each(function () {
            $(this).trigger('click');
            $(this).change();
        });
    }    

    function toggleInputs() {
        var isChecked = $(this).attr('checked');
        var inputs = $(this).closest('tr').find('input:text');

        if (isChecked)
            inputs.removeAttr('disabled');
        else
            inputs.attr('disabled', 'disabled');
    }
</script>

这就是我的表格：

<table id="mappings">
    <thead>
        <tr>
            <th><input type="checkbox" id="cb-master"></th>
            <th>Title</th>
            <th>Input</th>
        </tr>
    </thead>
    <tbody>
        <tr id="grandparent">
            <td><input type="checkbox" id="cb-grandparent" /></td>
            <td>Grandparent</td>
            <td />
        </tr>
        <tr id="parent" class="child-of-grandparent">
            <td><input type="checkbox" id="cb-parent" /></td>
            <td>Parent</td>
            <td />
        </tr>
        <tr id="child-1" class="child-of-parent">
            <td><input type="checkbox" id="cb-child-1" /></td>
            <td>Child 1</td>
            <td><input type="text" /></td>
        </tr>
        <tr id="child-2" class="child-of-parent">
            <td><input type="checkbox" id="cb-child-2" /></td>
            <td>Child 2</td>
            <td><input type="text" /></td>
        </tr>
    </tbody>
</table>

当我手动选中/取消选中每个框时，这是有效的，但是当我通过toggleCheckAll()函数以编程方式执行时，它不起作用。还有什么我必须要做的事情也是以编程方式绑定这个事件吗？

另外，我很难递归地实现checkChildren函数，因为每次我尝试获取异常nodeName is null or not an object。

非常感谢任何输入。感谢。

Answer 1

查看jsfiddle

如果不是这样：

 this.checked = isChecked;

试

 $(this).trigger('click');

要最初禁用所有输入文本，请先执行以下操作：

 $('input:text').each(function(){
     $(this).attr('disabled', 'disabled'); 
 });

这会回答你的问题吗？我无法测试它，但我认为通过实际触发click事件它将执行其余的代码或者不是将它绑定到click事件，你将它绑定到change事件，这也应该工作。

JQuery Check All＆amp;启用不一起工作的字段

1 个答案: