Disable/enable submit button | jQuery

Normally, end users like to press a few times on the submit button to make sure the button is surely clicked, and it will cause the double submission issues. So, the common solution is disables the submit button after user clicked on it. Using jQuery to enable/disable a submit button has many advantages as it will allow you to enable/disable the button based on user interaction. To enable/disable a button with jQuery you need to use prop()/attr() methods.

jQuery .prop()

$('#btn').prop('disabled', true); //disble
$('#btn').prop('disabled', false); //enable
run this source code Browser View
Full Source | jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#myForm").submit(function (e) { e.preventDefault(); $("#btn").prop("disabled", true); //disable return true; }); }); </script> </head> <body> <form id="myForm" action="#" method="POST"> <input type="submit" id="btn" value="Click me to disable.."></input> </form> </body> </html>

jQuery .attr()

Also, you can use jQuery attr() method to enable/disable a button.
$('#btn').attr('disabled', true); //disble
$('#btn').attr('disabled', false); //enable
run this source code Browser View
Full Source | jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#myForm").submit(function (e) { e.preventDefault(); $("#btn").attr("disabled", true); //disable return true; }); }); </script> </head> <body> <form id="myForm" action="#" method="POST"> <input type="submit" id="btn" value="Click me to disable.."></input> </form> </body> </html>

jQuery.attr() Vs. jQuery.prop()

Both attr() and prop() are used to get or set the value of the specified property of an element attribute, but attr() returns the default value (Original state) of a property whereas prop() returns the current value (Current state).
  1. .attr() changes attributes for that HTML tag.
  2. .prop() changes properties for that HTML tag as per the DOM tree.
In the majority of cases, prop() does what attr() used to do. Replacing calls to attr() with prop() in your code will generally work. So, it is advised that if you are using a later version of JQuery you should use .prop() whenever possible.
Disable/enable jquery button

Disabling submit button when text field is empty

It's a good practice to disable the submit button when their text field is empty. This is done by controlling the state of the button (enabled/disabled) based on whether the input field is filled or empty. The same principle applies to checkboxes and radio buttons.
$('#myTxt').on('input change', function() { if($(this).val() != '') { $('#mySubmit').prop('disabled', false); } else { $('#mySubmit').prop('disabled', true); } });
run this source code Browser View
Full Source | jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $('#myTxt').on('input change', function() { if($(this).val() != '') { $('#mySubmit').prop('disabled', false); } else { $('#mySubmit').prop('disabled', true); } }); }); </script> </head> <body> <input type="text" id="myTxt" /> <input type="submit" id="mySubmit" disabled="disabled" value="Search"/> </body> </html>