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');


<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"/>


2 Answers 2


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:facet name="start">
                        <apex:outputPanel >
                            <apex:commandButton value="Save" disabled="true"/>
                            <apex:commandButton value="Save & Close" disabled="true"/>
                            <apex:commandButton value="Cancel" disabled="true"/>


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


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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .