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
trueby 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>
