Teach with us

HTML DOM Button disabled Property

The HTML DOM Button disabled property is associated with disabled attribute of the <button> element .The button disabled property is used to set or return whether a given button is disabled or not. It is used to disable the button so that the user can no longer interact with the specified element. Setting the disabled property will grey the button by default in the web browsers.

Syntax

Following is the syntax for −

Setting the disabled property −

buttonObject.disabled = true|false

Here, the true|false specifies if the given input button should be disabled or not.

  • True − The button gets disabled.
  • False − The button won’t get disabled.

Let us see an example for the button disabled property −

Example

<!DOCTYPE html>
<html>
<body>
<button id="Button1">BUTTON</button>
<p>Click the below button to disable the above button.</p>
<button onclick="buttonDis()">CLICK IT</button>
<p id="Sample">
<script>
   function buttonDis() {
      document.getElementById("Button1").disabled = true;
      var x=document.getElementById("Button1").disabled;
      document.getElementById("Sample").innerHTML = "Button disabled is "+x;
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking CLICK IT button −

In the above example −

We have created a button with id “Button1” and the button is by default enabled.

<button id="Button1">BUTTON</button>

We have then created the CLICK IT button to execute buttonDis() method on click.

<button onclick="buttonDis()">CLICK IT</button>

The buttonDis() method gets the button element by its id “button1” and sets the disabled attribute on it to true. After disabling the button its disabled value (true or false) is assigned to the variable x and displayed in the paragraph with id “Sample”

function buttonDis() {
   document.getElementById("Button1").disabled = true;
   var x=document.getElementById("Button1").disabled;
   document.getElementById("Sample").innerHTML = "Button disabled is "+x;
}
Updated on 07-Aug-2019 11:47:41

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements