当复选框为 true 时禁用文本框不起作用

Disabling Textbox when Checkbox is true is not working

提问人:Ann 提问时间:8/5/2020 最后编辑:HomungusAnn 更新时间:8/6/2020 访问量:87

问:

我有一个脚本,每当在网格视图中取消选中复选框时,我都会禁用文本框:

$(function () {
    //Enable Disable all TextBoxes when Header Row CheckBox is checked.
    $("[id*=chkHeader]").bind("click", function () {
        var chkHeader = $(this);

        //Find and reference the GridView.
        var grid = $(this).closest("table");

        //Loop through the CheckBoxes in each Row.
        $("td", grid).find("input[type=checkbox]").each(function () {

            //If Header CheckBox is checked.
            //Then check all CheckBoxes and enable the TextBoxes.
            if (chkHeader.is(":checked")) {
                $(this).attr("checked", "checked");
                var td = $("td", $(this).closest("tr"));
                $("input[type=text]", td).removeAttr("disabled");
            } 
            else {
                $(this).removeAttr("checked");
                var td = $("td", $(this).closest("tr"));
                $("input[type=text]", td).attr("disabled", "disabled");
                $("input[type=text]", td).val = ""
            }
        });
    });

    //Enable Disable TextBoxes in a Row when the Row CheckBox is checked.
    $("[id*=chkResult]").bind("click", function () {

        //Find and reference the GridView.
        var grid = $(this).closest("table");

        //Find and reference the Header CheckBox.
        var chkHeader = $("[id*=chkHeader]", grid);

        //If the CheckBox is Checked then enable the TextBoxes in thr Row.
        if (!$(this).is(":checked")) {
            var td = $("td", $(this).closest("tr"));
            $("input[type=text]", td).attr("disabled", "disabled");
            $("input[type=text]", td).val = ""
        } 
        else {
            var td = $("td", $(this).closest("tr"));
            $("input[type=text]", td).removeAttr("disabled");
        }

        //Enable Header Row CheckBox if all the Row CheckBoxes are checked and vice versa.
        if ($("[id*=chkResult]", grid).length == $("[id*=chkResult]:checked", grid).length) {
            chkHeader.attr("checked", "checked");
        } 
        else {
            chkHeader.removeAttr("checked");
        }
    });
});

ASP 代码:

<table>
    <tr>
        <asp:Panel ID="pnlItems" runat="server" Height="100%">
           <td colspan="3" class="PrimaryLabelTop" style="height: auto" >
                <asp:Label ID="lbItems" runat="server" CssClass="PrimaryLabel" meta:resourcekey="lblNecropsyFoundResource1" >
                    Necropsy: Itemized Information
                </asp:Label>
                <br />
                <br />
                <asp:GridView ID="gvItems" runat="server" EmptyDataText="No data available." Width="100%" DataSourceID="dsItems" EnableModelValidation="True" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="ValueID" HeaderText="ValueID" SortExpression="NecropsyValueID" InsertVisible="False" ReadOnly="True" Visible="false" />
                        <asp:BoundField DataField="GroupE" HeaderText="Group Description" SortExpression="GroupE" ReadOnly="true"/>
                        <asp:BoundField DataField="ItemE" HeaderText="Item Description" SortExpression="ItemE" ReadOnly="true"/>   
                        <asp:TemplateField HeaderStyle-Width="10%" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
                            <HeaderTemplate>
                                <asp:CheckBox ID="chkHeader" runat="server"/>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="chkResult" runat="server" Checked='<%# IIf(Eval("Result").ToString() = "Selected", True, False) %>' AutoPostBack="True"/>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Comment" SortExpression="Commment">
                            <ItemTemplate>
                                <asp:TextBox ID="txtComment" Visible='<%# Bind("AllowMemo")%>' runat="server" Text='<%# Bind("Comment") %>'></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="ValueID" HeaderText="ValueID" InsertVisible="False" ReadOnly="True" SortExpression="ValueID" Visible="false"/>
                    </Columns>
                </asp:GridView>
                <br />
                <asp:ObjectDataSource ID="dsItems" runat="server" SelectMethod="GetItemValues" TypeName="HealthWeb.HealthWS.Health">
                    <SelectParameters>
                        <asp:QueryStringParameter DefaultValue="0" Name="SampleID" QueryStringField="QS_LABSAMPLE" Type="Int32" />
                    </SelectParameters>
                </asp:ObjectDataSource>
            </td>
        </asp:Panel>
    </tr> 
    <tr>
        <td class="PrimaryLabelTop" />
    </tr>
    <tr>
        <td>
            <asp:Button ID="btnSave" runat="server" Text="Save" meta:resourcekey="btnSaveResource1" height="26px" style="text-align: center" width="60px" />
            <asp:Button ID="btnClose" runat="server" Text="Close" meta:resourcekey="btnCloseResource1" height="26px" style="text-align: center" width="60px" />
        </td>
    </tr>
</table>

问题 1: [chkHeader] 工作正常。但是当我单独尝试检查一个 [chkResult] 时,它会清除 [txtComment],但随后启用所有 txtComment 而不是我刚刚检查的特定行。

问题 2: 通过绑定网格视图,如何在取消选中复选框时禁用文本框?

谢谢!

JavaScript asp.net vb.net

评论

0赞 Mary 8/6/2020
与 vb.net 的联系在哪里?

答:

0赞 JobesK 8/6/2020 #1

你有 autopostback=true,所以它会回发,你的值在那里丢失。处理 onRowDataBound 方法上的控件,您可以在其中设置每行控件及其属性。

评论

0赞 Ann 8/6/2020
我应该删除 autopostback=true 吗?