ASP.Net 4.5 - Checkbox and hidden div...seems like it should be easy. :\

ASP.Net 4.5 - Checkbox and hidden div...seems like it should be easy. :\

I'm definitely a novice but this seems like a no-brainer, to me.  I'm using ASP.NET 4.5 in VS 2012, using jQuery 1.7.1 and UI 1.8.20 (what VS comes with.)

I've got a single checkbox and hidden div.  When the box is checked, I'd like it to BE checked, and slide the div open...and vice-versa.  The sliding div works great...no problems there.  However, the checkbox is not obeying and will not check or un-check.  It sticks in its original state, or automatically checks and unchecks itself faster than the naked eye...or something strange.  Either way, I'm stuck on the checkbox part of the equation, which is critical because I need the value for a flag in the database.

Here's my code (simplified.)  I included all of the jQuery code in this page, just in case someone spots a conflict or some other inappropriate code.  I tried removing the dialog-specific code and it didn't help:

  1.         $(document).ready(function()
            {
                //get checkbox
                var extRuleCheck = $("#ExtRuleCheck");
                var extRulePanel = $("#ExtRulePanel");
                var isExtended = "<%= this.IsExtended %>";

                //"blind" effect speed
                $.fx.speeds._default = 500;

                //init dialog
                $("#FeatureInfoPanel").dialog({
                    title: "Extended vs Basic Entries",
                    height: 300,
                    width: 500,
                    autoOpen: false,
                    show: "blind"
                    //hide: "explode"
                });

                //extended rule?
                if (isExtended == "True")
                {
                    extRuleCheck.attr("checked", true);
                    extRulePanel.show();
                }

                //checkbox onclick event
                extRuleCheck.click(function(e)
                {
                    if (extRulePanel.is(":visible"))
                    {
                        extRuleCheck.attr("checked", false);
                        extRulePanel.slideUp();
                    }
                    else
                    {
                        extRuleCheck.attr("checked", true); //or .prop("checked", true)
                        extRulePanel.slideDown();
                    }

                    e.preventDefault();
                });

                //What's This popup link event
                $("#infoPopupLink").click(function(e)
                {
                    $("#FeatureInfoPanel").dialog("open");
                    e.preventDefault();
                    return false;
                });
            });



















































...the checkbox:

  1.         <tr>
                <td colspan="2" valign="top">
                    <asp:checkbox id="ExtRuleCheck" text="Is Extended Rule" clientidmode="Static" runat="server" />            
                    <img src="../Images/help.gif" alt="WhatIsThis" name="WhatIsThis" width="16" height="16" border="0" />&nbsp;<a href="#" id="infoPopupLink" name="infoPopupLink">What's This?</a>
                    <asp:panel id="FeatureInfoPanel" clientidmode="Static" runat="server">
                        <div class="FeatureInfoPopup">
                            Describe feature here...
                        </div>
                    </asp:panel>
                </td>
            </tr>











...the sliding/hidden panel

  1.                 <asp:panel id="ExtRulePanel" style="display:none;" clientidmode="Static" runat="server">
  2. ...stuff in here...
    </asp:panel>