I have asp:panel on my page. At run time, I add controls to this panel, and I want to disable/enable all its controls as per business logic.

I tried with this:

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

But it is not working.

Does anyone has any idea to make this work?

I have asp:panel on my page. At run time, I add controls to this panel, and I want to disable/enable all its controls as per business logic.

I tried with this:

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

But it is not working.

Does anyone has any idea to make this work?

• javascript
• asp

• Do/Can you use the jQuery framework? – The Scrum Meister Commented Feb 23, 2011 at 8:16
• Note that if you disable form elements, their value won't be sent to the server when posting back the data. If you want the value to be sent, assign their readOnly property instead. – Shadow Wizzard Commented Feb 23, 2011 at 8:46

5 Answers 5

An asp:Panel just produces a div element. This isn't a form control, it's just there for structure.

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

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

Or plain ol' JavaScript:

var controls = document.getElementById("<%=mypanel.ClientID%>").getElementsByTagName("input");

for (var i = 0; i < controls.length; i++)
    controls[i].disabled = true;

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>

**It is 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>

 <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>

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