Introduction: In this article I am going to explain how to enable and disable all asp.net or HTML
controls like textbox, dropdownlist, radiobutton, radiobuttonlist, checkbox, checkboxlist, multiline textbox (textarea) and button placed inside div tag according to dropdownlist selection using jquery as shown in demo image.
In previous articles I explained
how to Enable disable all controls placed inside div based on checkbox selection using jquery and jQuery to get DropDownList Selected item value,text and index and jQuery AJAX JSON example in Asp.net to insert data into sql server database without postback and jQuery to limit and display number of characters left in multiline textbox or textarea and Upload multiple files or images through one fileupload control using jQuery plugin
Description: While working on
asp.net project I encountered the following requirement:
- By default all the controls placed on the page should be disabled
- Enable all the controls placed on the page only when applicant has either partially or fully submitted the application fees otherwise disable all the controls so that applicant can’t apply for the job.
Above requirement can be
implemented easily by server side coding by getting the dropdownlist selected
value and based on that set the enable property of all the controls to true or
false. But to make this process fast and to minimize the code I decided to
implement it at client side using jquery and I am also going to share it with
all so that you can implement it in your project if required.
The concept is very simple. Place all the controls inside a div tag ("myDiv" in his example) and using jquery find all the controls contained in the div tag and then enable or disable them based on dropdownlist selected value.
The concept is very simple. Place all the controls inside a div tag ("myDiv" in his example) and using jquery find all the controls contained in the div tag and then enable or disable them based on dropdownlist selected value.
Implementation: Let’s check the concept by implementing it.
HTML Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Enable Disable all form controls placed
inside div based on dropdownlist selected value</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
type="text/javascript">
$(document).ready(function
() {
EnableDisableControls();
});
function
EnableDisableControls() {
var selectedValue = $('#<%=ddlEligible.ClientID
%>').val();
if (selectedValue == 1 || selectedValue
==3) {
$("#myDiv").find("input, select, button, textarea").prop("disabled", false);
}
else {
$("#myDiv").find("input, select, button, textarea").prop("disabled", true);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset
style="width:
370px">
<legend>
Application Fee
<asp:DropDownList ID="ddlEligible" runat="server" onchange="EnableDisableControls();">
<asp:ListItem
Value="0" Text="-Select-"></asp:ListItem>
<asp:ListItem
Value="1" Text="Submitted"></asp:ListItem>
<asp:ListItem
Value="2" Text="Not Submitted"></asp:ListItem>
<asp:ListItem
Value="3" Text="Partially Submitted"></asp:ListItem>
</asp:DropDownList>
</legend>
<div id="myDiv">
<table cellspacing="2">
<tr>
<td>Full Name </td>
<td>
<asp:TextBox ID="txtFullName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Email </td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Gender </td>
<td>
<asp:RadioButton
ID="rbMale" Text="Male" runat="server" GroupName="gender" />
<asp:RadioButton ID="rbFemale" Text="Female" runat="server" GroupName="gender" /></td>
</tr>
<tr>
<td>Nationality </td>
<td>
<asp:DropDownList ID="ddlNationality" runat="server" Width="173px">
<asp:ListItem Text="-Select-" Value="0"></asp:ListItem>
<asp:ListItem Text="Indian" Value="1"></asp:ListItem>
<asp:ListItem Text="Others" Value="2"></asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td>Skills </td>
<td>
<asp:CheckBoxList ID="cblSkills" runat="server" RepeatColumns="2">
<asp:ListItem Text="Asp.Net" Value="1"></asp:ListItem>
<asp:ListItem Text="MVC" Value="2"></asp:ListItem>
<asp:ListItem Text="jQuery" Value="3"></asp:ListItem>
<asp:ListItem Text="Sql Server" Value="4"></asp:ListItem>
</asp:CheckBoxList></td>
</tr>
<tr>
<td>Post applying for </td>
<td>
<asp:RadioButtonList ID="rblApplyingFor" runat="server" RepeatColumns="2">
<asp:ListItem Text="Trainee" Value="1"></asp:ListItem>
<asp:ListItem Text="Team Leader" Value="2"></asp:ListItem>
<asp:ListItem Text="Software Engineer" Value="3"></asp:ListItem>
<asp:ListItem Text="Project manager" Value="4"></asp:ListItem>
</asp:RadioButtonList></td>
</tr>
<tr>
<td>Paste your
resume </td>
<td>
<asp:TextBox ID="txtResume" runat="server" Columns="34" Rows="4" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</div>
</fieldset>
</div>
</form>
</body>
</html>
Now over to you:
" I hope you
have got the way to enable disable all asp.net or HTML controls placed inside div based on dropdownlist selected value 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..