How to enable disable panel using jquery.

Posted on 2012-08-10
Medium Priority
Last Modified: 2012-08-29
I have the following code,
<asp:TextBox id="txtreceivingreport" Text="" runat="server">
I want when the user enters the anything in textbox, the panel should be enabled
<asp:Panel id="p1" runat="server" Enabled="false">
<asp:RadioButton id="rbmale" runat="server" Text="Male">
<asp:RadioButton id="rbfemale" runat="server" Text="FeMale">
Question by:searchsanjaysharma

Expert Comment

ID: 38283107

You can do using the OnTextChanged event on Text box. And you can handle Page partial rendering using

 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
LVL 35

Accepted Solution

Robert Schutt earned 1500 total points
ID: 38283138
I agree it may be better on server side but if you want to do it client side with jQuery use something like this:
            $('#txtreceivingreport').keyup(function (e) {
                if ($(this).val() == "") {
                    $('#p1').addClass('aspNetDisabled').find('input[type=radio][id^=rb]').each(function () { $(this).attr('disabled', true); });
                } else {
                    $('#p1').removeClass('aspNetDisabled').find('input[type=radio][id^=rb]').each(function () { $(this).attr('disabled', false); });

Open in new window

By the way I'm still learning jQuery myself so there may be a quicker way, also I'm not sure if you need to mess with the class on the div but it seemed a logical addition.
LVL 83

Expert Comment

ID: 38283909
Don't use :
<asp:Panel id="p1" runat="server" Enabled="false">
<asp:Panel id="p1" runat="server" style="display:none">

Now you can use :
$("#<%= txtreceivingreport.ClientID %>").keyup(function() {
     if( $(this).val().length>0 ) $("#<%= p1.ClientID %>").show();

Open in new window


Author Closing Comment

ID: 38344251

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month15 days, 19 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question