jQuery: Disable/enable the form submit button

Last update on August 19 2022 21:50:45 (UTC/GMT +8 hours)

jQuery Practical exercise Part - I : Exercise-4

Disable/enable the form submit button.
Disable the submit button until the visitor has clicked a check box.

Sample Data :

 <body>
  <input id="accept" name="accept" type="checkbox" value="y"/>I accept<br>
  <input id="submitbtn" disabled="disabled" name="Submit" type="submit" value="Submit" />
</body>

Sample solution :

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Disable/enable the form submit button</title>
</head>
<body>
<input id="accept" name="accept" type="checkbox" value="y"/>I accept<br>  
<input id="submitbtn" disabled="disabled" name="Submit" type="submit" value="Submit" />
</body>
</html>

JavaScript Code :

$('#accept').click(function() {
	if ($('#submitbtn').is(':disabled')) {
    	$('#submitbtn').removeAttr('disabled');
    } else {
    	$('#submitbtn').attr('disabled', 'disabled');
    }
});

See the Pen jquery-practical-exercise-4 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Disable right click menu in html page using jquery.
Next: Fix broken images automatically.