HTML | DOM Input Color disabled Property

The DOM Input Color disabled Property in HTML DOM is used to set or return whether a color picker should be disabled or not. A Disabled element is usually is unusable and un-clickable and are usually grey in color by default in all the Browser. This Property is used to reflect the HTML disabled attribute.

Syntax:

It is used to return the disabled property.

colorObject.disabled

It is used to set the disabled property.

colorObject.disabled = true|false

Property Values:

true: It specify that the color picker is disabled.
false: It has a Default value. It defines that the color picker would not be disabled.

Return Value: It returns a Boolean value which represents that the color picker would be disabled or not.

Example-1: This Example illustrates how to return the Property.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>

        HTML DOM Input Color disabled Property

    </title>

</head>
 
<body style="text-align:center;">

    <h1>

        GeeksForGeeks

    </h1>

    <h2> 

        HTML DOM Input Color disabled Property 

    </h2>
 
        <form id="myGeeks">

            <label>

              Select your favorite color:

          </label>

            <input type="color"

                   value="#009900"

                   name="Geek_color"

                   id="color"

                   disabled>

        </form>
 
    <button onclick="myGeeks()">

        Click Here!

    </button>
 
    <p id="GFG" 

       style="color:green;

              font-size:24px;">

  </p>
 
    <script>

        function myGeeks() {

            var x = 

                document.getElementById(

                  "color").disabled;

            document.getElementById(

              "GFG").innerHTML = x;

        }

    </script>

</body>
 
</html>

Output:

Before Clicking On Button:

After Clicking On Button:

Example-2: This Example illustrates how to set the Property.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>

        HTML DOM Input Color disabled Property

    </title>

</head>
 
<body style="text-align:center;">

    <h1>

        GeeksForGeeks

    </h1>

    <h2> 

        HTML DOM Input Color disabled Property 

    </h2>
 
        <form id="myGeeks">

            <label>

              Select your favorite color:

          </label>

            <input type="color"

                   value="#009900" 

                   name="Geek_color" 

                   id="color"

                   disabled>

        </form>
 
    <button onclick="myGeeks()">

        Click Here!

    </button>
 
    <p id="GFG"

       style="color:green;

              font-size:24px;">

  </p>
 
    <script>

        function myGeeks() {

            var x = 

                document.getElementById(

                  "color").disabled = false;

            document.getElementById("GFG").innerHTML = x;

        }

    </script>

</body>
 
</html>