[SalesForce] How to disable a apex command button

In my VF page I want to disable the command button via Javascript(not through controller). 

<apex:page id="thepage" standardController="Opportunity" extensions="OpportunityExt">  
 <apex:form id="theform"> 


        <script type="text/javascript">
        function run(){ 
        document.getElementById("thepage:theform:GoButton").disabled=true;
        }
        </script> 

  <apex:commandButton action="{!Go}" value="Go"
                        id="GoButton" onclick="run();"/>

  </apex:form> 


</apex:page>

However I do not see the disabled being set with a value when do an inspect. What am I missing here?

enter image description here

Best Answer

You should set the btnDisabled class name, as well as setting "disabled". Here's a live example for you to use:

<apex:page standardStylesheets="true" lightningStylesheets="false" showHeader="true" >
    <apex:form>
        <script>
        function disableOther() {
            var btn = document.querySelector("[id$='btn2']");
            btn.className = 'btn btnDisabled';
            btn.disabled = 'disabled';
            return false;
        }
        </script>
        <apex:commandButton value="Button 1" onclick="return disableOther()"/>
        <apex:commandButton id="btn2" value="Button 2" />
    </apex:form>
</apex:page>
Related Topic