Sling Academy
Home/JavaScript/JavaScript: How to Disable a Button on Click

JavaScript: How to Disable a Button on Click

Last updated: March 16, 2023

When building interactive websites (or web apps) with JavaScript, there might be cases where you want to disable a button after it gets clicked one time, for example, to prevent a user from submitting a form multiple times and causing errors or duplicate data. This practical article will show you how to do so through a complete example.

What Is The Point?

In general, there are two ways to disable a button: using CSS or using the HTML attribute disabled.

Using CSS

You can set the pointer-events property of the button to none. This will prevent any mouse events from triggering on the button. You can also set the opacity property of the button to a lower value to make it look faded. For example:

/* Define a CSS class that disables an element */
.disabled {
  pointer-events: none;
  opacity: 0.5;
}

Using HTML attribute

You can set the disabled attribute of the button to true. This will make the button unclickable and grayed out by default in web browsers. You can also use JavaScript to set or remove this attribute dynamically. For example:

<!-- Define a button element with a disabled attribute -->
<button id="myButton" disabled="true">Click Me</button>

<!-- Define a script tag that contains the JavaScript code -->
<script>
  // Get the button element by id
  var button = document.getElementById("myButton");

  // Remove the disabled attribute using removeAttribute()
  button.removeAttribute("disabled");
</script>

Complete Example

Preview

The Code

The full source code with explanations:

<html>
<head>
    <title>Sling Academy</title>
    <style>
        .button {
            padding: 10px 30px;
        }
        /* CSS disabled class */
        .disabled {
            pointer-events: none;
            opacity: 0.5;
        }
    </style>
</head>

<body>

    <h2>Welcome to Sling Academy</h2>
    <p>The button below is one-time use. It will be disabled after one click</p>
    <button id="myButton" class="button" onclick="disableButton()">Click Me</button>

    <script>
        // This function will be called when the button is clicked
        const disableButton = () => {
            // Get the button element by id
            var button = document.getElementById("myButton");

            // Add the disabled class using classList.add()
            button.classList.add("disabled");
        }
    </script>

</body>

</html>

Afterword

You’ve learned more than one technique to disable a button programmatically with vanilla JavaScript. Try to tweak the example, add some things, remove some things, change some things, and see what happens next. Happy coding & have a nice day!

Next Article: JavaScript: Get the Position (X & Y Coordinates) of an Element

Previous Article: JavaScript: 4 Ways to Get the Width & Height of an Element

Series: JavaScript: Document Object Model Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration