AsyncPostBackTrigger for Checkbox control not firing

Question

Context of the problem:

I have a checkbox and a button. The button is disabled and colored grey upon the page load. I want the checkbox to enable and re-color the button if checked, and revert the change if unchecked. Think of it as a User Agreement page, where the user accepts the terms and needs to click on the checkbox to proceed.

There is a grid view and other components above the page that would break upon a postback, so searching online I found that I could use an UpdatePanel. Thought this would be more simple than writing jQuery for the checkbox, but it isn't working

Code:

ASPX

<asp:UpdatePanel ID ="upCheckbox" runat="server">
    <ContentTemplate>
        <asp:CheckBox ID="checkLabel" runat="server" OnCheckedChanged="checkLabel_CheckedChanged"/><asp:Label ID="AknowledgementLabel" runat="server" Text="Info is correct & Enable button"></asp:Label>
        <br /><br />
        <asp:Button ID="btnSubmit" Text="Submit Application" CssClass="jqbutton" OnClick="btnSubmit_Click" runat="server"/>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="checkLabel" EventName="CheckedChanged"/>
    </Triggers>
</asp:UpdatePanel>

Code Behind:

protected void Page_Load(object sender, EventArgs e)
{
    btnSubmit.Enabled = false;
    btnSubmit.ForeColor = System.Drawing.Color.Gray;
}

protected void checkLabel_CheckedChanged(object sender, EventArgs e)
{
    if (checkLabel.Checked)
    {
        btnSubmit.Enabled = true;
        btnSubmit.ForeColor = System.Drawing.ColorTranslator.FromHtml("#336699");
    }
    else
    {
        btnSubmit.Enabled = false;
        btnSubmit.ForeColor = System.Drawing.Color.Gray;
    }
}

Problem:

The checkbox does not work and the submit button remains disabled. Not sure if I am using Update Panels for the appropriate purpose or if am missing something. Is it possible to accomplish this the way that I am trying to, or should I move on to jQuery?

Answer 1

You are missing AutoPostback="true" in your CheckBox control. By default it is set to false. With autopostback missing your event won't reach server side.

<asp:UpdatePanel ID ="upCheckbox" runat="server">
    <ContentTemplate>
        <asp:CheckBox ID="checkLabel" runat="server" AutoPostback="true" OnCheckedChanged="checkLabel_CheckedChanged"/>
        <asp:Label ID="AknowledgementLabel" runat="server" Text="Info is correct & Enable button"></asp:Label>
        <br /><br />
        <asp:Button ID="btnSubmit" Text="Submit Application" CssClass="jqbutton" OnClick="btnSubmit_Click" runat="server"/>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="checkLabel" EventName="CheckedChanged"/>
    </Triggers>
</asp:UpdatePanel>