Code work perfectly. But buttons doesnt stay disabled. Come back able

@Raghunath B

Sorry Raghunath B, I saw it right now. Thank you a lot. Your code is clean and very simple to understand it. Be blessed ! :-)

Hi Israel,

Make sure to read and understand all the comments in the code snippet.

Disabling clicked button is optional. You can enable it by commenting the code line given below or set it disabled = false.

// Optional: disable clicked button too, if u want you can comment this.

clickedButton.disabled = true;

Thanks.

@Raghunath B

Hi, I come back again just for a little correction about your friendly codes. Its works as I need but my question is why when I click its disable even the clicked button. All button should be clicked but not the clicked one.

For instance, btn1,btn2,btn3,btn4 when the btn1 is clicked all buttons (btn2,btn3,btn4 should be disabled not the btn1 and so on).

This usually happens because Angular is re-rendering the component or change detection is resetting the button state.

Common things to check:

• Make sure the disabled state is bound to a component variable, not set manually
  html
  Save
  
  Ensure isDisabled is not being reset after an API call, route change, or async update

• If you’re using OnPush, confirm the value is updated immutably or via ChangeDetectorRef

• Avoid re-initializing the value in ngOnInit() or ngOnChanges()

• If inside a form, check that Angular isn’t re-enabling it due to form state changes

In short: the code may “work”, but Angular is updating the view again and re-enabling the button. Bind the disabled state properly and track where the value is getting reset.

The main issue here isn’t the JavaScript — it’s the form submission lifecycle. When a submit button is clicked, the browser posts the form immediately, so the DOM resets before the disabled state can persist.

A simple fix is to explicitly stop the form from submitting until after you disable the buttons. For example:

    1
    2

If you’re doing any async work (AJAX, validation, etc.), you can also call event.preventDefault() and submit manually once everything is ready.

This pattern is commonly used to prevent double submissions and accidental re-clicks. We use a similar approach when building interactive sign configuration flows — if you’re interested in UX-focused frontend practices, you can see some related insights here:zerosigns.co.uk

What you’re seeing is normal behavior for type="submit" buttons — the form submits and the page refreshes, so any disabled state only lasts briefly. A cleaner way to handle this is to disable all buttons and prevent the default submit until your logic finishes.

Instead of using inline onclick, you can attach a single event listener and disable all buttons at once, then allow the submit to continue:

    

    1
    2
    3
    4

This way, once any button is clicked, all submit buttons stay disabled until the request completes. It’s also easier to maintain than having multiple functions.

I’ve run into similar UI-state issues when working on interactive product tools for interior surface solutions — if you’re into architectural interior film or clean UI patterns, Samsung Interior Film has some interesting implementations worth checking out:surfexfilm.uk

@Raghunath B

I do test quickly its sound great. If any problem I will come bback. Anyway it's works!!! Thank you.

Dear Raghunath B,

The code you send doesnt work. That mean it's works very well ONLY with button as button's type (not as submit's type ). What's happen? Did you understand well my question :-)

In one word, the buttons come back to be able just once. Not after some second as you said here:

// OPTIONAL: re-enable after 1 second (if page does not reload)
            setTimeout(() => {
                buttons.forEach(btn => btn.disabled = false);
            }, 1000);

You’re right about the root cause:
because the buttons are type="submit", the form submits immediately and the page reloads, so the disabled state only appears for a moment.

You can keep the buttons as submit buttons and still solve this cleanly with one reusable, dynamic function.

Key idea (clean & reusable)

1. Use one single function for all buttons

2. Disable all other submit buttons when one is clicked

3. Let the form submit normally

4. (Optional) Re-enable buttons after 1 second if you stay on the page

Updated HTML (no duplicate functions)

    

    Click to Disable
    1
    2
    4

Single reusable JavaScript function

Why this works

• ? Reusable – no hard-coded IDs

• ? Scales automatically (add more buttons, no JS changes)

• ? Keeps type="submit"

• ? Prevents double-clicks

If company.php reloads the page, the disabled state will disappear anyway (that’s normal).
This solution is mainly to:

• prevent multiple submits

• avoid double clicks

• improve UX before submit