In this article I will explain with an example, how to enable and disable TextBox on Button Click using JavaScript and jQuery.
When the Yes Button is clicked, the TextBox will be enabled and when the No Button is clicked the TextBox will be disabled.
Enable Disable TextBox on Button Click using JavaScript
The HTML Markup consists of two HTML Buttons and an HTML DIV consisting of a TextBox.
Both the Buttons have been assigned a JavaScript OnClick event handler.
When any of the Buttons are clicked, the EnableDisableTextBox JavaScript function is executed inside which based on whether the Yes or No Button is clicked, the TextBox will be enabled or disabled respectively using JavaScript.
<script type="text/javascript">
function EnableDisableTextBox(btnPassport) {
var txtPassportNumber = document.getElementById("txtPassportNumber");
if (btnPassport.value == "Yes") {
txtPassportNumber.removeAttribute("disabled");
} else {
txtPassportNumber.setAttribute("disabled", "disabled");
}
}
</script>
<span>Do you have Passport?</span>
<input type="button" value="Yes" onclick="EnableDisableTextBox(this)" />
<input type="button" value="No" onclick="EnableDisableTextBox(this)" />
<hr />
<div>
Passport Number:
<input type="text" id="txtPassportNumber" disabled = "disabled" />
</div>
Enable Disable TextBox on Button Click using jQuery
The HTML Markup consists of two HTML Buttons and an HTML DIV consisting of a TextBox.
Both the Buttons have been assigned a jQuery Click event handler.
When any of the Buttons are clicked, based on whether the Yes or No Button is clicked, the TextBox will be enabled or disabled respectively using jQuery.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[name=btnPassport]").click(function () {
if ($(this).val() == "Yes") {
$("#txtPassportNumber").removeAttr("disabled");
} else {
$("#txtPassportNumber").attr("disabled", "disabled");
}
});
});
</script>
<span>Do you have Passport?</span>
<input type="button" value="Yes" name="btnPassport" />
<input type="button" value="No" name="btnPassport" />
<hr />
<div>
Passport Number:
<input type="text" id="txtPassportNumber" disabled = "disabled"/>
</div>
Screenshot
![Enable Disable TextBox on Button Click 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
