How To Disable Enable Button After One Click In Javascript

If you want to disable/enable a button after clicking the button in JavaScript, you can use the button element’s disabled attribute. When you set the button’s disabled attribute’s value to true, then the button will be disabled. When you set the button’s disabled attribute’s value to false, then the button will be enabled. This article will give you some examples.

1. How To Disable Enable Button After One Click In Javascript Example.

  1. There are 2 buttons on this example web page.
  2. When you click the second button, it will change the first button’s disabled attribute value to disable or enable it.
  3. And it will also change the second button’s text accordingly.
  4. The example Html file name is how-to-enbale-disable-button-in-javascript.html.
  5. Below is the above Html file source code.
    <!DOCTYPE html>
    <html>
    <head>
        <title>How To Enable Disable Button In JavaScript</title>
    
        <meta charset="utf-8">
    
        <script type="text/javascript">
    
            function toggleButton(buttonId, tirggerBtnId){
    
                var btn = document.getElementById(buttonId);
    
                var trigerBtn = document.getElementById(tirggerBtnId);
    
                if(btn.disabled){
    
                    btn.disabled = false;
    
                    trigerBtn.value = "Disable Button1";
    
                }else{
    
                    btn.disabled = true;
    
                    trigerBtn.value = "Enable Button1";
    
                }
            }
    
        </script>
    
    </head>
    <body>
    
        <input type="button" value="Button1" id="btn1" />
    
        <input type="button" value="Disable Button1" onclick="toggleButton('btn1', 'tirggerBtn')" id="tirggerBtn" />
    
    </body>
    </html>

Leave a Comment

Your email address will not be published.

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

Clicky