How to Disable the Button in TypeScript

Learn, how to disable or enable the button in TypeScript.

Normally, We disabled the button in TypeScript when a input field is empty or a checkbox is not checked in the signup or login forms.

Disabling the button

To disable the button in TypeScript, first we need to access the button element inside TypeScript using document.querySelector() method.

const btn = document.querySelector('.submit') as HTMLButtonElement | null;;

Now, we need to set its disabled property to true.

btn.disabled = true;

When we set a btn.disabled property to a value true, the button is disabled.

Full example:

const btn = document.querySelector('.submit') as HTMLButtonElement | null;;
btn.disabled = true;

We can also enable the button by setting the disabled property to a value false.

btn.disabled = false;