CODEWITHSUNDEEP
javascriptasp.net
BreakHead
BreakHead

Reputation: 10672

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

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?

Upvotes: 4

Views: 40678

Answers (5)

Suraj
Suraj

Reputation: 51

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

Upvotes: 0

Suraj
Suraj

Reputation: 51

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

Upvotes: 0

Null Head
Null Head

Reputation: 2941

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

Upvotes: -3

zdyn
zdyn

Reputation: 2173

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;

Upvotes: 9

santosh singh
santosh singh

Reputation: 28652

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>

Upvotes: 0

Related Questions