In this article we will learn Enable Disable TextBox on DropDownList change/Selection using JavaScript and jQuery.
When the user Other (option) is selected in DropDownList, the TextBox will be enabled else disabled.
In this article i will explain Enable Disable TextBox on DropDownList change/Selection using JavaScript and jQuery.
When the user Other (option) is selected in DropDownList, the TextBox will be enabled else disabled.
Enable Disable TextBox on DropDownList other(option) Selection using JavaScript and jQuery
HTML Code
<body>
<label>Your favorite Sports?</label>
<select id=”ddlSports”>
<option value=”0″>Please Select</option>
<option value=”1″>Cricket</option>
<option value=”2″>Footbal</option>
<option value=”3″>Hockey</option>
<option value=”4″>Kabaddi</option>
<option value=”5″>Other Sports</option>
</select>
<br />
<hr />
Other:
<input type=”text” id=”txtOtherSports” disabled=”disabled” />
</body>
Script Code
When the user Other (option) is selected in DropDownList, the TextBox will be enabled else disabled.
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(function () {
$(“#ddlSports”).change(function () {
if ($(this).val() == 5) {
$(“#txtOtherSports”).removeAttr(“disabled”);
$(“#txtOtherSports”).focus();
} else {
$(“#txtOtherSports”).attr(“disabled”, “disabled”);
}
});
});
</script>
Complete Code
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(function () {
$(“#ddlSports”).change(function () {
if ($(this).val() == 5) {
$(“#txtOtherSports”).removeAttr(“disabled”);
$(“#txtOtherSports”).focus();
} else {
$(“#txtOtherSports”).attr(“disabled”, “disabled”);
}
});
});
</script>
</head>
<body>
<label>Your favorite Sports?</label>
<select id=”ddlSports”>
<option value=”0″>Please Select</option>
<option value=”1″>Cricket</option>
<option value=”2″>Footbal</option>
<option value=”3″>Hockey</option>
<option value=”4″>Kabaddi</option>
<option value=”5″>Other Sports</option>
</select>
<br />
<hr />
Other:
<input type=”text” id=”txtOtherSports” disabled=”disabled” />
</body>
</html>
Output
