asp:panel show hide not working with Jquery
<p>I have two panels and a text box on ASPX page. Both the panels contains static text as well as radio buttons along with required field validators. Requirement is as follows.</p>

<ol>
<li>Whenever page loads at very first time, if value of text box is greater than 1000, first panel should not show and 2nd should be displayed.</li>
<li>If value is less than 1000, first panel should show and 2nd should not.</li>
</ol>

<p>Now, the problem is:</p>

<p>Text box value can be changed by the user and thus depending upon the entered value, using jQuery I need to show appropriate panel. I don't want to have labels for each static text and then set the same property for all labels and radio buttons one by one; that is why I used a <code>&lt;asp:Panel&gt;</code>.</p>

<ol>
<li>I can't set visible property to false from code behind as then this panel will not be rendered on ASPX page and show, hide will not work.</li>
<li>I tried setting <code>panelNA.Style.Add(HtmlTextWriterStyle.Display, "none")</code> from code behind but this also doesn't work. As static text and controls are still visible on UI.</li>
<li>As i have required field validators on the radio buttons inside a panel, so I want that these validators should be disabled and enabled if panel is hidden or displayed respectively.</li>
<li>While saving the things, i can't check the status of panel being visible or not as it is set by jQuery. So it's not available on server side and its always says <code>visible = true</code>.</li>
</ol>

<p>Code: </p>

<pre><code>function disablePanelNA() {
  var value = 0;
  value = parseInt($('#&lt;%=txt1.ClientID %&gt;').val(), 10);
  if (value &lt; 1000) {
   $('#&lt;%= panel.ClientID %&gt;').hide();
   $('#&lt;%= panelNA.ClientID %&gt;').show();
  }
  else
  {
    $('#&lt;%= panel.ClientID %&gt;').show();
    $('#&lt;%= panelNA.ClientID %&gt;').hide();
  }
}
&lt;asp:TextBox ID="txt1" runat="server" onChange="disablePanelNA()" /&gt;
&lt;asp:Panel ID="panel" runat="server"&gt;
&lt;tr&gt;
  &lt;td class="numberColumnNoBold"&gt;a.&lt;/td&gt;
  &lt;td&gt;Do you want to continue?&lt;/td&gt;
  &lt;td align="right"&gt;
    &lt;asp:RadioButtonList ID="rbl1" runat="server" RepeatDirection="Horizontal"&gt;
      &lt;asp:ListItem Value="Yes" Text="Yes" /&gt;
      &lt;asp:ListItem Value="No" Text="No" /&gt;
    &lt;/asp:RadioButtonList&gt;
    &lt;AjaxRequiredFieldValidator ID="id1" runat="server" ControlToValidate="rbl1" 
                                ErrorMessage="Error occured" /&gt;
  &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
  &lt;td class="numberColumnNoBold"&gt;b.&lt;/td&gt;
  &lt;td&gt;Do you want to exit?&lt;/td&gt;
  &lt;td align="right"&gt;
    &lt;asp:RadioButtonList ID="rbl2" runat="server" RepeatDirection="Horizontal"&gt;
      &lt;asp:ListItem Value="Yes" Text="Yes" /&gt;
      &lt;asp:ListItem Value="No" Text="No" /&gt;
    &lt;/asp:RadioButtonList&gt;
    &lt;AjaxRequiredFieldValidator ID="id2" runat="server" ControlToValidate="rbl2"
                                ErrorMessage="Error occured again" /&gt;
  &lt;/td&gt;
&lt;/tr&gt;
&lt;/asp:panel&gt;

&lt;asp:Panel ID="panelNA" runat="server"&gt;
&lt;tr&gt;
  &lt;td class="numberColumnNoBold"&gt;a.&lt;/td&gt;
  &lt;td&gt;Do you want to continue?&lt;/td&gt;
  &lt;td align="right"&gt;
    &lt;td align="right"&gt;
      &lt;div style="text-align:right;font-weight:bold;padding-right:20px;"&gt;N/A&lt;/div&gt;
    &lt;/td&gt;
  &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
  &lt;td class="numberColumnNoBold"&gt;b.&lt;/td&gt;
  &lt;td&gt;Do you want to exit?&lt;/td&gt;
  &lt;td align="right"&gt;
    &lt;div style="text-align:right;font-weight:bold;padding-right:20px;"&gt;N/A&lt;/div&gt;
  &lt;/td&gt;
&lt;/tr&gt;
&lt;/asp:panel&gt;
</code></pre>
