How to enable and disable button using JavaScript?
June 17, 2020

We can use Button's disabled Property to do do.

Button disabled Property

The disabled property sets or returns whether a button is disabled, or not.

A disabled element is the one which is unusable and un-clickable.

That means users won't be able to click on it. You might think, why would we even need one then? Well, in many cases, you want to enable the button when user performs some kinds of action first. 

Disabled elements are usually rendered in gray by default in browsers.

This property reflects the HTML disabled attribute.

It is supported in all major browsers.


Return the disabled property:


// not necessarily only Id though

Set the disabled property:

buttonId.disabled = true or false (default is false)

// not necessarily only Id though

Where true and false specifies whether a button should be disabled or not. true indicates that the button is disabled. false indicates that the button is not disabled. 


Disable the button using JavaScript

document.getElementById("myBtn").disabled = true;

Enable the button using JavaScript

document.getElementById("myBtn").disabled = false;

Find out if a button is disabled or not:

var x = document.getElementById("myBtn").disabled;

if (x == true) {
  console.log("button is disabled");
} else {
  console.log("button is enabled");

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS Mar 2 WordPress: How to access first and random row values from a repeater field in ACF? Mar 1 The basics of CSS Box model Feb 27 WordPress: How to display slider repeater fields in ACF? Feb 26 Simple Page Hit Counter in PHP

You might also like these

How to display modal from bottom to top using CSS and JavaScript?CSSSome interesting HTML Input Attributes to rememberHTML4 different Ways to Get JavaScript OutputJavaScriptSolution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software”MiscHow to create a smooth scrolling effect with CSS?CSSUPDATE and DELETE Statements in PostgresPostgres