Add disabled attribute JavaScript | Disable HTML elements Example

HTML webpages needed to disable/enable the button programmatically using JavaScript. Not only button sometimes needed for input, checkbox, radio button, etc. Once you have the element reference, set its disabled property to true to disable it using JavaScript.

button.disabled = true

Add disabled attribute JavaScript Example

Disable Multiple HTML elements

For multiple elements use class and getElementsByClassName method with for-loop statement in JS.

<html>
<body>

    <input class="dummy" type="button"  value="Submit" />
    <input class="dummy" type="checkbox" name="checkbox">
    <input class="dummy" type="radio" name="">
    
</body>
<script>

    var elem = document.getElementsByClassName('dummy');
    for (var i = 0; i <= elem.length; i++) {
        elem[i].disabled = true;
    }
    
    
</script>
</html>

Output:

HTML Add disabled attribute JavaScript

Disable Single element

Use id if you want Add disabled attribute on single element.

<html>
<body>

    <input id="dummy" type="button"  value="Submit" />
    
</body>
<script>

    var elem = document.getElementById('dummy');

    elem.disabled = true;
    
</script>
</html>

Do comment if you have any doubts or suggestions on this topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.