jQuery

Enable Disable TextBox on DropDownList change/Selection using JavaScript and jQuery

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
[php]
<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>
[/php]

Script Code
When the user Other (option) is selected in DropDownList, the TextBox will be enabled else disabled.

[php]
<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>
[/php]

Complete Code

[php]
<!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>
[/php]

Output

enable-disable-textbox-on-dropdownlist-change-selection-using-javascript-and-jquery

enable-disable-textbox-on-dropdownlist-change-selection-using-javascript-and-jquery

Leave a Reply

Your email address will not be published.