To disable and enable a button in jQuery, we need to change its disabled
property to true
or false
by using jQuery. The basic function to change the disabled property is attr()
and prop()
. So let’s check the basic example first.
- First, create a button and give an id to it. For example “submitBtn”.
- Select the button by using the jQuery query selector. Example
$("#submitBtn")
. - Set the disabled property to
true
by usingattr()
orprop()
.
Example:
//by using prop()
$("#submitBtn").prop("disabled", true);
//by using attr()
$("#submitBtn").attr("disabled", true);
The above example is a basic one. So let’s see how we use it in different conditions.
CONTENTS
In this example, we are going to make a button unclickable in jQuery based on a text field value. If the text field is empty, submit button will also be disabled.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to disable and enable button in jquery</title>
</head>
<body>
<form method="get">
<input type="text" id="user_name" name="user_name"/>
<button type="submit" id="submitBtn" disabled="true">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#user_name').keyup(function() {
if($(this).val() != '') {
$("#submitBtn").prop('disabled', false);
}else{
$("#submitBtn").prop('disabled', true);
}
});
});
</script>
</body>
</html>
Sometimes we need to disable submit button after clicking to avoid duplicate form submission. So we can easily do that.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to disable and enable button in jquery</title>
</head>
<body>
<form method="get" id="myForm">
<input type="text" id="user_name" name="user_name"/>
<button type="submit" id="submitBtn">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myForm").submit(function () {
$(this).closest("#submitBtn").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>
Many times we see that the submit button is disabled until the Terms and Conditions checkbox in the user registration form is not checked. So let’s check how to enable a button when a checkbox is checked in jQuery.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to disable and enable button in jquery</title>
</head>
<body>
<form method="get" id="myForm">
<input type="checkbox" name="toc" id="toc"> Terms And Condition
<button type="submit" id="submitBtn" disabled="true">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myForm").submit(function () {
$(this).closest("#submitBtn").attr("disabled", true);
return true;
});
$('#toc').click(function () {
//check if checked
if ($(this).is(':checked')) {
$('#submitBtn').removeAttr('disabled'); //enable submit
} else {
$('#submitBtn').attr('disabled', true); //disable submit
}
});
});
</script>
</body>
</html>