How to disable a Button in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 31, 2022

banner

Photo from Unsplash

Disable a button in TypeScript #

To disable a button in TypeScript:

  1. Select the button element.
  2. Use the setAttribute() method to set the disabled attribute.
  3. For example, btn?.setAttribute('disabled', '').

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <input id="submit" type="submit" name="submit" /> <button id="btn">bobbyhadz</button> <script src="./src/index.ts"></script> </body> </html>

And here is the related TypeScript code.

src/index.ts
const input = document.getElementById('submit') as HTMLInputElement | null; // ✅ Set disabled attribute input?.setAttribute('disabled', ''); // ✅ Remove disabled attribute // input?.removeAttribute('disabled') // ----------------------------------------------------------------- const btn = document.getElementById('btn') as HTMLButtonElement | null; // ✅ Set disabled attribute btn?.setAttribute('disabled', ''); // ✅ Remove disabled attribute // btn?.removeAttribute('disabled');

We selected the element using the document.getElementById method.

We used a type assertion to type the input and button elements correctly.

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that the input variable stores anHTMLInputElement or a null value and not to worry about it.

We used a union type to specify that the variable could still be null, because if an HTML element with the provided id does not exist in the DOM, the getElementById() method returns a null value.

We used the optional chaining (?.) operator to get around the possibly null value in the example.

We used the setAttribute method to set the disabled attribute on the element.

The method takes the following 2 parameters:

  1. name - the name of the attribute to be set.
  2. value- the value to assign to the attribute.
src/index.ts
const input = document.getElementById('submit') as HTMLInputElement | null; // ✅ Set disabled attribute input?.setAttribute('disabled', ''); // ✅ Remove disabled attribute // input?.removeAttribute('disabled') // ----------------------------------------------------------------- const btn = document.getElementById('btn') as HTMLButtonElement | null; // ✅ Set disabled attribute btn?.setAttribute('disabled', ''); // ✅ Remove disabled attribute // btn?.removeAttribute('disabled');

The optional chaining (?.) operator short-circuits returning undefined if the reference is equal to null or undefined.

In other words, if the input variable stores a null value, we won't attempt to call the setAttribute() method on null and get a runtime error.

If the disabled attribute already exists on the element, the setAttribute method will update the value, otherwise a new attribute is added with the specified name and value.

When setting the value of a boolean attribute, such as disabled, we can specify any value for the attribute and it will work.

If the attribute is present at all, regardless of the value, its value is considered to be true.

If a boolean attribute is not present, the value of the attribute is considered to be false.

buttons disabled

If you need to remove an attribute from the element, use the removeAttribute method.

src/index.ts
const input = document.getElementById('submit') as HTMLInputElement | null; // ✅ Set disabled attribute input?.setAttribute('disabled', ''); // ✅ Remove disabled attribute input?.removeAttribute('disabled'); // ----------------------------------------------------------------- const btn = document.getElementById('btn') as HTMLButtonElement | null; // ✅ Set disabled attribute btn?.setAttribute('disabled', ''); // ✅ Remove disabled attribute btn?.removeAttribute('disabled');
When setting the disabled attribute, we pass an empty string as the value for the attribute because it's a best practice to set boolean attributes without a value.

If the attribute is not set on the element, the removeAttribute method returns without throwing an error.

If you don't want to use the optional chaining (?.) operator, you can use a simple if statement that serves as a type guard.

src/index.ts
const input = document.getElementById('submit') as HTMLInputElement | null; // 👉️ input has type HTMLInputElement or null here if (input != null) { // 👉️ input has type HTMLInputElement here // ✅ Set disabled attribute input.setAttribute('disabled', ''); // ✅ Remove disabled attribute // input.removeAttribute('disabled'); }

We explicitly check that the input variable does not store a null value.

TypeScript knows that the input variable has a type of HTMLInputElement in the if block and allows us to directly call the setAttribute() method.

Which approach you pick to exclude null from the type before calling the setAttribute() method is a matter of personal preference.

However, it's always a best practice to include null in the type assertion, because the getElementById method would return null if no element with the provided id was found.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.