0

我必须处理我在 sql 库中的用户角色。每个角色都有一个复选框，想法是如果选中“父”，则选中“子”复选框，如果选中所有“子”，则选中“父”。

我在一个页面中尝试了这个脚本并且它有效，但我无法在我的 asp.net 中使它工作

这是我的脚本和代码。

$(document).ready(function () {
    $('.parent').click(function () {
        if ($(this).is(':checked'))
            $(this).parent().find('.children input[type="checkbox"]').attr('checked', 'checked');
    });

    $('.children input[type="checkbox"]').click(function () {
        var numberOfCheckboxes = $(this).parents('.children').find('input[type="checkbox"]').length;

        if ($(this).parents('.children').find('input[type="checkbox"]').filter('input[checked=checked]').length == numberOfCheckboxes)
            $(this).parents('div').find('.parent').attr('checked', 'checked');
    });
});

<div>
    <asp:DataList ID="outerDataList" runat="server" DataSourceID="ObjectDataSource2" >
        <ItemTemplate>
            <li>
                <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>'
                    Visible="False" />
                <asp:Label ID="typeLabel" runat="server" Text='<%# Eval("type") %>'
                    Visible="False" />
                <asp:CheckBox ID="chkEnabled" class="parent" runat="server"
                    Checked='<%# Eval("Enabled") %>' Text='<%# Eval("name") %>' />
            </li>
            <ul class="children">
                <asp:DataList ID="innerDataList" runat="server" DataSource='<%# Eval("Roles") %>'>
                    <ItemTemplate>                                
                        <li>
                            <asp:Label ID="idLabelInt" runat="server"
                                Text='<%# Eval("id") %>' Visible="False" />
                            <asp:Label ID="typeLabelInt" runat="server"
                                Text='<%# Eval("type") %>' Visible="False" />
                            <asp:CheckBox ID="chkEnabledInt" runat="server"
                                Checked='<%# Eval("Enabled") %>' Text='<%# Eval("name") %>' />
                        </li>
                    </ItemTemplate>
                </asp:DataList> 
            </ul>                   
        </ItemTemplate>
    </asp:DataList>
</div>
4

1 回答 1

1

移动列表项结束标记以封装子列表。

<div>
    <asp:DataList ID="outerDataList" runat="server" DataSourceID="ObjectDataSource2" >
        <ItemTemplate>
            <li>
                <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>'
                    Visible="False" />
                <asp:Label ID="typeLabel" runat="server" Text='<%# Eval("type") %>'
                    Visible="False" />
                <asp:CheckBox ID="chkEnabled" class="parent" runat="server"
                    Checked='<%# Eval("Enabled") %>' Text='<%# Eval("name") %>' />
                <ul class="children">
                    <asp:DataList ID="innerDataList" runat="server" DataSource='<%# Eval("Roles") %>'>
                        <ItemTemplate>
                            <li>
                                <asp:Label ID="idLabelInt" runat="server"
                                    Text='<%# Eval("id") %>' Visible="False" />
                                <asp:Label ID="typeLabelInt" runat="server"
                                    Text='<%# Eval("type") %>' Visible="False" />
                                <asp:CheckBox ID="chkEnabledInt" runat="server"
                                    Checked='<%# Eval("Enabled") %>' Text='<%# Eval("name") %>' />
                            </li>
                        </ItemTemplate>
                    </asp:DataList>
                </ul>
            </li>
        </ItemTemplate>
    </asp:DataList>
</div>

在这里，您正在寻找具有以下类别的复选框父级的后代children：

$(this).parent().find('.children input[type="checkbox"]')

正如您目前所拥有的那样，<ul>作为 的兄弟<li>而不是孩子，此选择器不起作用。

除了破坏您的选择器之外，它也是无效的 HTML。A<li>必须是 、 或 元素的<ul>子<ol>元素<menu>。这些元素的唯一允许的子元素是<li>元素。（例外情况是<menu>，它可以包含流内容而不是元素<li>。）要生成有效的 HTML，您必须将父<div>元素替换为<ul>、<ol>或<menu>。

另外，我认为您希望.closest()选择单个元素-匹配选择器的第一个祖先，而不是.parents()选择匹配选择器的每个祖先。

于 2012-11-19T18:20:26.423 回答