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.
In previous articles i explained How to jQuery to Show Hide controls placed inside Div based on Checkbox selection and jQuery to Show/Hide controls placed in Div based on RadioButtonList selected value and Show/Hide Div content based on DropDownList selected value and Create jQuery scrollable gridview with fix header in asp.net and Print page content placed inside DIV tag with print preview using JavaScript and Best example to implement stylish jQuery form validations
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();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:300px;">
<legend>Enable,
Disable, Show, Hide controls example</legend>
<table>
<tr>
<td>
<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>
</td>
</tr>
<tr>
<td>
<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:DropDownList>
<asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
<asp:Button ID="Button1" Text="Button" runat="server" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
" 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."
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..