jQuery to Enable,Disable,Show and Hide Asp.net DropDownList,TextBox and Button based on DropDownList selected value

Introduction: In this article i am going to explain How to enable, disable, hide and unhide the controls e.g. DropdownList, TextBox or Button according to DropDownList selection in asp.net using jQuery.
Enable,disable,show and hide asp.net dropdownlist,textbox and button based on dropdownlist selected value

Description: One of the common requirement while working on asp.net projects is to show, hide or enable, disable the controls e.g. textbox, dropdownlist  or other controls based on DropDownList selected value. Here in this article example you will learn how to perform this task easily using jQuery.

Implementation:  Below is the HTML Source of the page having the controls and jQuery script required for this demonstration.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>

    <script type="text/javascript"> 
        $(document).ready(function () {
            $('#<%=DropDownList1.ClientID %>').change(function () {

            //Get DropDownList selected value
                var selectedValue = $('#<%=DropDownList1.ClientID %>').val();

                //Enable Controls
                if (selectedValue == 1) {
                    $('#<%=DropDownList2.ClientID %>').prop('disabled', false);
                    $('#<%=TextBox1.ClientID %>').prop('disabled', false);
                    $('#<%=Button1.ClientID %>').prop('disabled', false);
                //Disable Controls
                else if (selectedValue == 2) {
                    $('#<%=DropDownList2.ClientID %>').prop('disabled', true);
                    $('#<%=TextBox1.ClientID %>').prop('disabled', true);
                    $('#<%=Button1.ClientID %>').prop('disabled', true);
                //Hide Controls
                else if (selectedValue == 3) {
                    $('#<%=DropDownList2.ClientID %>').hide();
                    $('#<%=TextBox1.ClientID %>').hide();
                    $('#<%=Button1.ClientID %>').hide();
                //Show Controls
                else {
                    $('#<%=DropDownList2.ClientID %>').show();
                    $('#<%=TextBox1.ClientID %>').show();
                    $('#<%=Button1.ClientID %>').show();
    <form id="form1" runat="server">
        <fieldset style="width:300px;">
<legend>Enable, Disable, Show, Hide controls example</legend>
                        <asp:DropDownList ID="DropDownList1" runat="server">
                            <asp:ListItem Value="1" Text="Enable Controls"></asp:ListItem>
                            <asp:ListItem Value="2" Text="Disable Controls"></asp:ListItem>
                            <asp:ListItem Value="3" Text="Hide Controls"></asp:ListItem>
                            <asp:ListItem Value="4" Text="Show Controls"></asp:ListItem>
                        <asp:DropDownList ID="DropDownList2" runat="server">
                            <asp:ListItem Value="1" Text="MCA"></asp:ListItem>
                            <asp:ListItem Value="2" Text="M.sc"></asp:ListItem>
                            <asp:ListItem Value="3" Text="MBA"></asp:ListItem>
                        <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
                        <asp:Button ID="Button1" Text="Button" runat="server" />                       


Now over to you:
" I hope you have learned how to Enable,Disable,Show and Hide Asp.net controls with this example and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..