Introduction

Disabling a submit button is a small feature, but it often controls an important part of the user experience: whether a form can be sent too early, too often, or in an invalid state. In jQuery, the right way to do it is to change the button's disabled property and connect that state to real validation or submission logic.

Use .prop() Instead of .attr()

For form controls, jQuery's .prop() method is the correct API because disabled is a DOM property, not just a static HTML attribute.

1<form id="signup-form">
2  <input id="email" type="email" />
3  <button id="submit-btn" type="submit">Submit</button>
4</form>
5
6<script>
7  $(function () {
8    $("#submit-btn").prop("disabled", true);
9  });
10</script>

To enable the button later:

$("#submit-btn").prop("disabled", false);

You may still see older examples using .attr("disabled", "disabled"), but .prop() is clearer and matches the current state of the element more reliably.

Enable the Button When Validation Passes

A common pattern is to disable the button until all required fields contain acceptable values.

1<form id="signup-form">
2  <input id="email" type="email" placeholder="Email" />
3  <input id="password" type="password" placeholder="Password" />
4  <button id="submit-btn" type="submit">Create account</button>
5</form>
6
7<script>
8  $(function () {
9    function updateButtonState() {
10      const email = $("#email").val().trim();
11      const password = $("#password").val();
12      const canSubmit = email.length > 0 && password.length >= 8;
13
14      $("#submit-btn").prop("disabled", !canSubmit);
15    }
16
17    $("#submit-btn").prop("disabled", true);
18    $("#email, #password").on("input", updateButtonState);
19  });
20</script>

This keeps the button state tied to the same rule the user sees in the form. It is much better than enabling the button on a timer or after one field changes without checking the others.

Prevent Double Submission During Ajax Requests

Another important use case is temporarily disabling the submit button after the form is sent. That stops accidental double clicks from creating duplicate requests.

1$(function () {
2  $("#signup-form").on("submit", function (event) {
3    event.preventDefault();
4
5    const $button = $("#submit-btn");
6    $button.prop("disabled", true).text("Submitting...");
7
8    $.ajax({
9      url: "/signup",
10      method: "POST",
11      data: $(this).serialize()
12    })
13      .done(function () {
14        alert("Account created");
15      })
16      .fail(function () {
17        alert("Request failed");
18        $button.prop("disabled", false).text("Create account");
19      });
20  });
21});

In this flow, the button is disabled only while the request is active. If the request fails, the button is enabled again so the user can try once more.

Keep the UI and Validation Consistent

A disabled button should not be the only validation rule. Users still need clear feedback about what is wrong. Good forms combine button state, inline field messages, and server-side validation.

That last part matters because disabling a button in the browser is only a convenience. It is not security. A user can still send a crafted request outside the page, so the server must validate the form independently.

It is also worth considering accessibility. If the button stays disabled with no explanation, the form feels broken. Pair the disabled state with visible guidance such as password rules or missing-field hints.

Common Pitfalls

• Using .attr() instead of .prop() for the live disabled state.
• Disabling the button but never re-enabling it after a failed request.
• Relying on the disabled button as the only validation mechanism.
• Updating the button state from one field without checking the full form.
• Making the button unavailable without telling the user what needs to be fixed.

Summary

• Use $(selector).prop("disabled", true or false) to control submit buttons in jQuery.
• Tie the button state to real validation rules rather than one-off events.
• Disable the button during Ajax submission to prevent duplicates.
• Re-enable the button on failure so the user can retry.
• Treat the disabled state as a UI aid, not as a replacement for server-side validation.