In this article I will explain with an example, how to activate TextBox if another option is selected in DropDownBox using JavaScript and jQuery.
When the Other (option) in DropDownList is selected, the TextBox will be enabled else disabled.
Activate TextBox if another option is selected in DropDownBox using JavaScript
The HTML Markup consists of a DropDownList (HTML SELECT) and a TextBox. The DropDownList (HTML SELECT) has been assigned a JavaScript OnChange event handler.
When an item (option) is selected in DropDownList (HTML SELECT), the EnableDisableTextBox JavaScript function is executed.
Inside this function, based on whether the Other option (item) is selected, the TextBox will be enabled else disabled.
<script type="text/javascript">
function EnableDisableTextBox(ddlModels) {
var selectedValue = ddlModels.options[ddlModels.selectedIndex].value;
var txtOther = document.getElementById("txtOther");
txtOther.disabled = selectedValue == 5 ? false : true;
if (!txtOther.disabled) {
txtOther.focus();
}
}
</script>
<span>Your favorite Bike model?</span>
<select id = "ddlModels" onchange = "EnableDisableTextBox(this)">
<option value = "1">Harley Davidson</option>
<option value = "2">Dukati</option>
<option value = "3">BMW</option>
<option value = "4">Suzuki</option>
<option value = "5">Other</option>
</select>
<br />
<br />
Other:
<input type="text" id="txtOther" disabled="disabled" />
Activate TextBox if another option is selected in DropDownBox using jQuery
The HTML Markup consists of a DropDownList (HTML SELECT) and a TextBox. The DropDownList (HTML SELECT) has been assigned a jQuery Change event handler.
When an item (option) is selected in DropDownList (HTML SELECT), based on whether the Other option (item) is selected, the TextBox will be enabled else disabled.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlModels").change(function () {
if ($(this).val() == 5) {
$("#txtOther").removeAttr("disabled");
$("#txtOther").focus();
} else {
$("#txtOther").attr("disabled", "disabled");
}
});
});
</script>
<span>Your favorite Bike model?</span>
<select id="ddlModels">
<option value="1">Harley Davidson</option>
<option value="2">Dukati</option>
<option value="3">BMW</option>
<option value="4">Suzuki</option>
<option value="5">Other</option>
</select>
<br />
<br />
Other:
<input type="text" id="txtOther" disabled="disabled" />
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads