function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
rcherrcher 

Disabling command button after one click

Hi,

I am trying to disable the command button "Quote>CW" once clicked. I am using JQuery for this. For some reason, the button is not getting disabled after one click.  Let me know what the issue could be.

Below is the code:-

<apex:page controller="Quote_To_CW_Test" sidebar="false" id="page">

<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >


 <script>
      
      function validateFunction(paramval,paramval1){
      
      if(paramval=='Sent'){
      
      alert('The quote has already been sent to CW. Cick Cancel to go back to the quote');
      
      return false;
      }
      
      
      if(paramval1=='false'){
      
      alert("Your Quote has not been synced. Please sync your quote before continuing");
      
      return false;
      
      }
                  
      }
     
  j$ = jQuery.noConflict();
     
function disableSave() {
 j$(".saveButtonId").prop("disabled","true");
 j$(".saveButtonId").val("Sending quote to CW...");
 j$(".saveButtonId").css( "border-color", "#c4c4c4" );
 j$(".saveButtonId").css( "color", "#909090" );
}
 
 function enableSave() { j$(".saveButtonId").removeProp( "disabled" ) j$(".saveButtonId").val("Save");
  j$(".saveButtonId").css( "border-color", "#7f7f7f" ); j$(".saveButtonId").css( "color", "#333" );
  }
 </script>
<apex:form id="form">
 
  <apex:pageBlock id="pageblock">
 
    <style>
            body .bPageBlock .pbBody .red .pbSubheader{
                background-color:#c00000;
            }
            body .bPageBlock .pbBody .grey .pbSubheader{
                background-color:#c0c0c0;
            }
            body .bPageBlock .pbBody .grey .pbSubheader h3{
                color:#000;
            }
            
            {
         text-align:center;
}
            
            
        </style>
    
    
    <style type="text/css">

.wrapper {
         text-align:center;
}
</style>

       
  <apex:outputPanel styleClass="red" id="outputpanel">
 
  <apex:pageBlockSection title="Click on the Quote>CW button below to send the Quote to CW"  id="pbSection">
 
  </apex:pageBlockSection>
   
  <div align="center" draggable="false">
 
 <!-----apex:actionStatus id="mySaveStatus"------>

<!-------apex:facet name="stop"------->
                                
<apex:commandbutton action="{!invokeMule}" onclick="disableSave()"
status="savingStatus" styleclass="saveButtonId" value="Quote>CW" id="saveButtonId"/>
      <!------/div-------->
       <!-------/apex:facet------->    
                 
      <apex:commandButton action="{!Cancel}" value="Cancel" disabled="false" id="theCancelButton"/>
 
  </div>
 
  </apex:outputPanel>

  </apex:pageBlock>
 
   </apex:form>
 
</apex:page>
Mahesh DMahesh D
Hi,

You can look into the below example:
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script>
<script>

    function buttonsEnabled(enabled) {
        // retrieve all of the buttons or links on the page
        // with the css class of btn
        var $buttons = jQuery('.btn');
        if (enabled === false) {
            // add the btnDisabled class to give it the look of being disabled
            // add the disabled attribute to actually disable interactability
            $buttons.toggleClass('btnDisabled', true).attr('disabled', 'disabled');
        } else {
            // remove the css class and the disabled attribute
            $buttons.toggleClass('btnDisabled', false).attr('disabled', null);
        } 
    }

    function doSomeWork() {
        // first, call the action function to post the form
        doSomeWorkActionFunction();

        // second, disable the buttons
        buttonsEnabled(false);

        // third, return false to prevent the click from
        // posting the form a second time
        return false;
    }

</script>

<apex:form>

    <apex:actionFunction name="doSomeWorkActionFunction" 
        action="{!yourControllerMethod}" 
        oncomplete="buttonsEnabled(true);"
        rerender="whateverYouNeedToRerender"></apex:actionFunction>

    <apex:commandLink action="{!yourControllerMethod}" 
        value="Your Text Here" 
        id="theCommandLink" 
        onclick="return doSomeWork();" />

</apex:form>

Here using the onComplete it is able to achieve.

You can also achieve this without using the JQuery, just by using the boolean variable with rendered attribute.

Also look into below URLs:

http://salesforce.stackexchange.com/questions/44856/how-to-disable-an-apex-commandbutton-after-first-click

http://salesforce.stackexchange.com/questions/7729/disable-commandbutton-after-first-click-to-prevent-double-submission

http://salesforce.stackexchange.com/questions/84077/how-to-enable-disable-the-commandbutton

Please do let me know if it helps you.

Regards,
Mahesh