How to disable and enable button in jQuery

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 using attr() or prop().

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

1. Disabled submit button if a text field is empty.

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>

2. Disabled submit button after form submission in jQuery.

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>

3. Enable and disable button using checkbox

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>

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment