javascript - 在同一行的复选框选中/未选中时启用 GridViewRow 中的 DropDownList(使用任何 c#、jquery、javascript)

Question

我有一个带有 CheckBox 和 DropDownList 作为模板字段列的 GridView。我试图在选中该行的复选框时启用该行的 DropDownList。

这是我的 aspx:

<asp:GridView runat="server" ID="GdvCPRetailerMap" AutoGenerateColumns="False" Font-Size="Small" CssClass="grid" BackColor="White" BorderWidth="0px" CellPadding="4" Width="100%" AllowSorting="True" SkinID="GVSalesManager" GridLines="none" AllowPaging="true" PageSize="10" PagerStyle-ForeColor="#0066cc" PagerStyle-CssClass="gvPagerCss" PagerStyle-Font-Underline="true" PagerStyle-Wrap="true" OnPageIndexChanging="GdvCPRetailerMap_PageIndexChanging" OnRowDataBound="GdvCPRetailerMap_RowDataBound">
    <Columns>
        <asp:BoundField ReadOnly="true" HeaderText="S.No" DataField="S.No." SortExpression="SNo">
            <ItemStyle HorizontalAlign="Center" Width="2%" />
            <HeaderStyle HorizontalAlign="Center" Font-Bold="true" Width="2%"/>
        </asp:BoundField>
        <asp:TemplateField ItemStyle-Width="3%" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:CheckBox ID="chkRow" runat="server" OnCheckedChanged="chkRow_CheckedChanged"/>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Channel Partner-1" HeaderStyle-Font-Bold="true" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:DropDownList ID="ddlCP1" Enabled="false" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCP1_SelectedIndexChanged"></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Channel Partner-2" HeaderStyle-Font-Bold="true" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:DropDownList ID="ddlCP2" Enabled="false" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCP2_SelectedIndexChanged"></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

我尝试在 CheckBox OnCheckedChanged 事件中执行此操作:

protected void chkRow_CheckedChanged(object sender, EventArgs e)
{
    CheckBox ck1 = (CheckBox)sender;

    GridViewRow grow =(GridViewRow)ck1.NamingContainer;
    DropDownList ddlR = (DropDownList)grow.Cells[6].FindControl("ddlCP1");

    if (ck1.Checked == true)
        ddlR.Enabled = true;
    else
        ddlR.Enabled = false;
}

但是这段代码似乎没有发生任何事情。断点甚至没有被击中。

有人可以指导我如何启用 CheckBox 已选中的 GridViewRow 的 DropDownList 的正确方向吗？以及是否有任何 jquery 或 javascript 代码可以实现相同的输出？

Answer 1

看起来您可能需要做的就是确保 CheckBox 引发回发。您可以通过将属性 AutoPostBack 设置为 true 来实现此目的。

<asp:CheckBox ID="chkRow" runat="server" 
    OnCheckedChanged="chkRow_CheckedChanged"
    AutoPostBack="true" />

作为documentation for AutoPostBack状态:

Gets or sets a value indicating whether the CheckBox state automatically posts back to the server when clicked.

另外:

Property Value

Type: System.Boolean

true to automatically post the state of the CheckBox control to the server when it is clicked; otherwise, false. The default is false.

此后，无需对特定单元格执行 FindControl 调用。您只需在 GridViewRow 本身上调用它即可。

protected void chkRow_CheckedChanged(object sender, EventArgs e)
{
    CheckBox ck1 = (CheckBox)sender;

    GridViewRow grow =(GridViewRow)ck1.NamingContainer;
    DropDownList ddlR = (DropDownList)grow.FindControl("ddlCP1");

    if (ck1.Checked == true)
        ddlR.Enabled = true;
    else
        ddlR.Enabled = false;
}