更新面板中的 Asp.net 复选框在选中和未选中（2 次点击）后失去其功能？

Question

我有一个 gridview，其中包括左侧下方的一列复选框和它们上方的“主”复选框，用于选中或取消选中它们。 事情是在对任何复选框进行 2 次点击后，它就会失去其功能。 不是主复选框，它一直在工作。

Gridview 不在更新面板中，在 Javascript 中有一个用于回发的链接按钮，该按钮在网格之外，在更新面板中。

当我将 Gridview 移动到更新面板中时，复选框得到修复，但主复选框失去了它的功能，实际上它确实检查了它们，但没有取消选中。 当我对这些更新面板使用 Async 或 PostBack 触发器时，问题仍然存在，要么主复选框仅具有 1 种方式的功能，例如仅选中或取消选中，要么它可以工作，但单个复选框在选中和取消选中后失去其功能。 我迷失了试图解决这个问题。

调试时，似乎 Javascript 中的 __doPostBack 在每个复选框点击 2 次后停止工作。

顺便说一句，它必须没有页面回发。

编辑：我认为 GridViewScroll 创建了元素的冻结副本，在第一次点击 header 复选框后，__dopostback 开始看到具有相反 state 的错误元素。 在第一次执行“检查所有”时，“mainChecked”结果为假。 在第二次单击执行“取消选中所有”时，“mainChecked”再次返回 false，即“单击后”state。

复选框；

<asp:TemplateField ItemStyle-Width="13px"
                    HeaderStyle-Width="7px" ItemStyle-HorizontalAlign="Center" >
            <HeaderTemplate>
                    <input type="checkbox" id="chckBoxHeader" runat="server" AutoPostBack="true" class="GridHeaderCheckBox" onchange="CheckBoxHeaderChanged();" />
            </HeaderTemplate>
            <ItemTemplate>
                    <asp:CheckBox ID="chckBox" runat="server" OnChange="CheckBoxSpanOnChange(this)" OnCheckedChanged="chckBox_CheckedChanged" CssClass="GridRowCheckBox" />
            </ItemTemplate>
</asp:TemplateField>

更新面板；

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:LinkButton ID="lnkPostBack" runat="server" OnClick="lnkPostBack_Click"></asp:LinkButton>
        </ContentTemplate>
</asp:UpdatePanel>

Javascript；

function CheckBoxSpanOnChange(spanElem) {
        CheckBoxOnChange($(spanElem).find('input').first());
    }

    function CheckBoxOnChange(elem) {
        if ($(elem) != null && $(elem) != 'undefined') {

            var elemId = $(elem).attr('id');

            if (elemId.includes("freezeitem")) {
                if ($(elem).prop('checked')) {

                    $('#' + elemId.replace('_freezeitem', '')).attr('checked', 'checked');
                }
                else {

                    $('#' + elemId.replace('_freezeitem', '')).removeAttr('checked');
                }
            }
            else {
                if ($(elem).prop('checked')) {

                    $('#' + elemId + '_freezeitem').attr('checked', 'checked');
                }
                else {

                    $('#' + elemId + '_freezeitem').removeAttr('checked');
                }

            }
        }
        __doPostBack('<%= lnkPostBack.UniqueID%>', '');
    }

    function CheckBoxHeaderChanged() {

        var checkboxes = document.querySelectorAll('#ctl00_ctl00_maincontent_content_grdList_ctl01_chckBoxHeader');
        var mainChecked = $(checkboxes[0]).prop('checked');

        for (var i = 0; i < checkboxes.length; i++) {
            if (mainChecked) {
                $(checkboxes[i]).prop('checked', false);
            }
            else {
                $(checkboxes[i]).prop('checked', true);
            }
        }

        var rowchkSpan = document.querySelectorAll('.GridRowCheckBox');

        for (var i = 0; i < rowchkSpan.length; i++) {
            var rowchk = $(rowchkSpan[i]).find('input').first();

            if (mainChecked) {
                $(rowchk).prop('checked', false);
            }
            else {
                $(rowchk).prop('checked', true);
            }
        }
        __doPostBack('<%= lnkPostBack.UniqueID%>', '');
    }

Answer 1

你说：它必须没有回发。 然而，您的复选框具有 OnCheckedChanged 和 AutoPostback=true 属性。 在您的 javascript 中，您正在调用“__doPostback”。

我认为第一步是：删除所有这些东西。 让 javascript 发挥它的魔力。 我假设只有单击链接按钮才需要回发。 （而且这个链接按钮不需要在更新面板中）