How to Disable the buttons when I clicked another button?

Question

We have requirement when customer click on save button, and then save & close and cancel buttons should get disable.

I have tried this but its not working. Please help me

VF Page :

jQuery Function :

function KillButtonsOtherThanQuickSave()
        {
            var $button1 = jQuery(document.getElementById('{!$Component.pg.addquoteform.pbl.pbb.btn1}'));
            $button1.toggleClass('btnDisabled', true).attr('disabled', 'disabled');

            var $button7 = jQuery(document.getElementById('{!$Component.pg.addquoteform.pbl.pbb.btn7}'));
            $button7.toggleClass('btnDisabled', true).attr('disabled', 'disabled');
        }

Buttons:

<apex:commandButton action="{!doSaveAndClose}" value="Save & Close" rendered="{!editMode && !aprove.isInApproval}" id="btn1" disabled="{!NOT(canSave)}"/>

<apex:commandButton action="{!cancel}" immediate="true" value="Cancel" id="btn7"/>

Answer 1

Here is a working solution to disable buttons while processing. I have used <apex:actionStatus> tag to implement this. Hope this helps.

VF Page

<apex:page controller="ButtonTestController" >
    <apex:form >
        <apex:pageMessages id="errormsg" />
        <apex:pageBlock >
            <apex:pageBlockButtons location="top">
                <apex:actionStatus id="SaveButtonStatus">
                    <apex:facet name="stop">
                        <apex:outputPanel >
                            <apex:commandButton action="{!doSave}" value="Save" status="SaveButtonStatus"  rerender="errormsg"/>
                            <apex:commandButton action="{!doSaveAndClose}" value="Save & Close" immediate="true"/>
                            <apex:commandButton action="{!cancel}" value="Cancel" immediate="true"/>
                        </apex:outputPanel>
                    </apex:facet>
                    <apex:facet name="start">
                        <apex:outputPanel >
                            <apex:commandButton value="Save" disabled="true"/>
                            <apex:commandButton value="Save & Close" disabled="true"/>
                            <apex:commandButton value="Cancel" disabled="true"/>
                        </apex:outputPanel>            
                    </apex:facet>
                </apex:actionStatus>            
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller

public with sharing class ButtonTestController {

    public PageReference cancel() {
        return null;
    }


    public PageReference doSaveAndClose() {
        return null;
    }


    public PageReference doSave() {
        return null;
    }    

}

Source:- http://www.davehelgerson.com/?p=545

Answer 2

i would add a same style to the 2 buttons that you want hide.

<apex:commandButton action="{!doSaveAndClose}" value="Save & Close" rendered="{!editMode && !aprove.isInApproval}" id="btn1" disabled="{!NOT(canSave)}" styleClass="js-ToHide"/>

<apex:commandButton action="{!cancel}" immediate="true" value="Cancel" id="btn7" styleClass="js-ToHide"/>

Then your function

function KillButtonsOtherThanQuickSave(){
    $('js.ToHide').prop( "disabled", true );
}

Best regards