In this article I will explain with an example, how to enable or disable Button based on condition using jQuery.
This article will illustrate how to enable the Button when text is entered in TextBox and disable the Button when the TextBox is empty using jQuery.
HTML Markup
The HTML Markup consists of an HTML TextBox and a Button. The HTML Button has been assigned disabled using the disabled attribute.
Passport Number:
<input type="text" id="txtPassportNumber" />
<hr />
<input id="btnSubmit" type="button" value="Submit" disabled="disabled" />
Enable or Disable Button based on condition using jQuery
Inside the jQuery document ready event handler, the TextBox has been assigned with a jQuery OnKeyUp event handler.
When User inputs a value in TextBox, first the Button is referenced. Then the value of the TextBox is checked.
If the TextBox has value, the Button is enabled and if the TextBox is empty, the Button is disabled using jQuery.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtPassportNumber").keyup(function () {
//Reference the Button.
var btnSubmit = $("#btnSubmit");
//Verify the TextBox value.
if ($(this).val().trim() != "") {
//Enable the TextBox when TextBox has value.
btnSubmit.removeAttr("disabled");
} else {
//Disable the TextBox when TextBox is empty.
btnSubmit.attr("disabled", "disabled");
}
});
});
</script>
Screenshot
![Enable or Disable Button based on condition using 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
