Introduction: In this article I am going to explain how to enable and disable all asp.net or HTML form controls e.g. textbox, dropdownlist, radiobutton, radiobuttonlist, checkbox, checkboxlist, multiline textbox (textarea) and button placed inside div tag based on checkbox selection as shown in demo image using jquery
In previous articles I explained
how to Enable disable all controls placed inside div tag based on dropdownlist selected value and show hide div content on Asp.net checkbox check uncheck using jQuery multiple functions and jQuery to Check Uncheck all items in CheckBoxList on click of Select All CheckBox and jQuery to Show Hide controls placed in Div based on RadioButtonList selected value and
Show image preview before uploading through fileupload control using jQuery
Description: While working on asp.net project I encountered the following requirement:
Description: While working on asp.net project I encountered the following requirement:
- By default all the controls placed on the page need to be disabled
- Enable all the controls placed on the page only when user checks the checkbox and on uncheck disable the form again .
Above requirement can be easily implemented by server side coding by checking whether the check box is
checked or not and based on that we can 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 going to share that with all. The concept is
very simple. Place all the controls inside a div tag and assign id to it(“myDiv” in this example )
and using jquery find all the controls contained in the div tag and then enable
or disable them based on checkbox status(checked or not).
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 checkbox check uncheck</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 status = $('#<%= cbApply.ClientID %>').is(':checked');
if (status == true) {
$("#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>
<asp:CheckBox ID="cbApply" runat="server" Text="Apply for the job" onclick="EnableDisableControls();" /></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:
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..