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.
HTML Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.