Disable a button with JavaScript

Set the button's Boolean disabled property:

<button id="save" type="button">Save</button>
<script>
  async function saveRecord() {
    // Replace this with the request or operation your app needs.
    await Promise.resolve();
  }

  const save = document.querySelector('#save');
  save.addEventListener('click', async () => {
    save.disabled = true;
    try {
      await saveRecord();
    } finally {
      save.disabled = false;
    }
  });
</script>

A disabled button cannot receive focus or activate its click handler, and a disabled form control is not submitted with the form. If you need to prevent duplicate requests, also guard the operation in your application code; changing the UI alone is not a security control.

Use aria-disabled="true" for a custom widget only when it remains focusable and your code handles the interaction. For a native button, the disabled property gives the browser the correct semantics. Re-enable it in finally so a failed request does not leave the form permanently unusable.

Sources

• MDN JavaScript reference