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

Question

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?

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. — user447356
– user447356, Commented Feb 23, 2011 at 8:46

zdyn · Accepted Answer · 2011-03-03 19:59:02Z

8

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;

edited Mar 3, 2011 at 19:59

answered Feb 23, 2011 at 8:29

zdyn

2,1731 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user447356 Over a year ago

Correct approach, but ASP.NET will produce "dynamic" ID so to get it use such code: document.getElementById("<%=mypanel.ClientID%>")

santosh singh · Accepted Answer · 2011-02-23 09:09:18Z

0

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>

edited Feb 23, 2011 at 9:09

answered Feb 23, 2011 at 8:47

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

2 Comments

user447356 Over a year ago

Not good, it won't iterate deep enough - what if the Panel contains another Panel that contains textbox? getElementsByTagName is ideal for such things..

user447356 Over a year ago

no problem, however I must comment also that ZDYN answer is exactly the same except for the ID which you get properly..

Suraj · Accepted Answer · 2016-04-07 12:45:10Z

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

Suraj · Accepted Answer · 2016-04-07 12:59:51Z

0

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

answered Apr 7, 2016 at 12:59

Suraj

514 bronze badges

1 Comment

abarisone Over a year ago

Could you please elaborate more your answer adding a little more description about the solution you provide?

Null Head · Accepted Answer · 2011-08-08 04:38:21Z

-3

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

answered Aug 8, 2011 at 4:38

Null Head

2,94113 gold badges64 silver badges87 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related