In this article I will explain with an example, how to enable and disable a TextBox when DropDownList (HTML SELECT) is changed i.e. when an item (option) is selected using JavaScript and jQuery.
When the Other (option) in DropDownList is selected, the TextBox will be enabled else disabled.
 
 
Enable Disable TextBox based on DropDownList change (selection) 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" />
 
 
Enable Disable TextBox based on DropDownList change (selection) 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
Enable Disable TextBox on DropDownList change (selection) using JavaScript and jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads