Enable / disable <asp: Panel> and all its control using Javascript

Question

I have asp:panel on my page. At runtime, I add controls to this panel, and I want to disable / enable all of my controls in accordance with the business logic.

I tried with this:

 document.getElementById('mypanel').disabled = true; 

But it does not work.

Does anyone have any ideas to make this work?

Answer 1

An asp:Panel just creates a div element. This is not a form of management; it is just for structure.

To disable each input control inside it, if you are using jQuery, try:

 $("#<%=mypanel.ClientID%> input").attr("disabled", true); 

Or simple ol 'JavaScript:

 var controls = document.getElementById("<%=mypanel.ClientID%>").getElementsByTagName("input"); for (var i = 0; i < controls.length; i++) controls[i].disabled = true; 

Answer 2

try the following code snippet

 <div> <asp:Panel ID="pnl" runat="server"> <asp:TextBox runat="server" /> <asp:TextBox runat="server" /> <asp:CheckBox Text="text" runat="server" /> </asp:Panel> <input type="button" name="name" value=" Test" onclick="ED();" /> </div> <script type="text/javascript"> function ED() { var div_to_disable = document.getElementById('<%=pnl.ClientID %>').getElementsByTagName("input"); var children = div_to_disable;//.childNodes; for (var i = 0; i < children.length; i++) { children[i].disabled = true; }; } </script> 

Answer 3

** Work 100% **

  function EnableDisableRadio(CheckBox1) { var controls = document.getElementById("<%=Panel1.ClientID%>").getElementsByTagName("input"); for (var i = 0; i < controls.length; i++) controls[i].disabled = CheckBox1.checked ? false : true; } 

  <asp:CheckBox ID="CheckBox1" runat="server" Text="check" onclick="EnableDisableRadio(this)"/> <asp:Panel ID="Panel1" runat="server" Width="160px" Enabled="False"> <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> </asp:RadioButtonList> </asp:Panel> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

Answer 4

  <asp:CheckBox ID="CheckBox1" runat="server" Text="check" onclick="EnableDisableRadio(this)"/> <asp:Panel ID="Panel1" runat="server" Width="160px" Enabled="False"> <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> </asp:RadioButtonList> </asp:Panel> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

  <asp:CheckBox ID="CheckBox1" runat="server" Text="check" onclick="EnableDisableRadio(this)"/> <asp:Panel ID="Panel1" runat="server" Width="160px" Enabled="False"> <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> </asp:RadioButtonList> </asp:Panel> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

Answer 5

I agree with the answer of Null Head. Following code for

 Panel panel = new Panel(); CheckBox checkbox = new CheckBox(); checkbox.Enabled = true; panel.Enabled = false; panel.Controls.Add(checkbox); 

creates a checkbox with disabled="disabled" inside the div also with disabled="disabled" .

Answer 6

asp: panel is a server control. Why are you manipulating it on the client side !? Just use mypanel.enable = false in the code for