How To Disabled And Enable Button With Java Script

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

In Java Script we can disbale and enable on click of button so today we see how to disable and enable button in java script

How To Disabled And Enable Button With Java Script

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

A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.

This property reflects the HTML disabled attribute.

Syntax

Return the disabled property:
buttonObject.disabled

Set the disabled property:
buttonObject.disabled = true|false
 

Property Values

Value Description
true|false Specifies whether a button should be disabled or not
  • true - The button is disabled
  • false - Default. The button is not disabled


Return Value:    A Boolean, returns true if the button is disabled, otherwise it returns false

Example(1)
<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() {
        document.getElementById("myBtn").disabled = true;
    }
</script>

In above example when you click button it will disable the button.

Example(2)
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
    function myFunction() {
        var x = document.getElementById("myBtn").disabled;
        document.getElementById("demo").innerHTML = x;
    }
</script>

In above example when you click button below to find out if the button above is disabled.

Example(3)
<button class="btn btn-success" id="myBtn">My Button</button>
<br><br>

<button  class="btn btn-primary" onclick="disableBtn()">Disable "My Button"</button>
<button  class="btn btn-primary" onclick="enableBtn()">Enable "My Button"</button>

<script>
    function disableBtn() {
        document.getElementById("myBtn").disabled = true;
    }

    function enableBtn() {
        document.getElementById("myBtn").disabled = false;
    }
</script>

In above example when you click button it will disbale and enable mybutton.

Complete Code For Disabled And Enable Button With Java Script
 
<!DOCTYPE html>
<html>
<head>
    <title>How To Disabled And Enable Button With Java Script</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: White">How To Disabled And Enable Button With Java Script</h1>
    </div>
    <br>
    <br>

    <div class="well">

        <button class="btn btn-success" id="myBtn">My Button</button>
        <br><br>

        <button  class="btn btn-primary" onclick="disableBtn()">Disable "My Button"</button>
        <button  class="btn btn-primary" onclick="enableBtn()">Enable "My Button"</button>

        <script>
            function disableBtn() {
                document.getElementById("myBtn").disabled = true;
            }

            function enableBtn() {
                document.getElementById("myBtn").disabled = false;
            }
        </script>
    </div>
</div>
</body>
</html>

Related Post