How to disable and enable button in Visualforce page in Salesforce?

Sample Code:

Visualforce page:

<apex:page sidebar="false" Controller="Sample" showHeader="true" id="pg">
    <script src="" type="text/javascript"></script> 
        var $ = jQuery.noConflict();
        function btnClick() {           
            $('input[id*=confirmBtn]').attr('class', 'btnDisabled');
        function btnComplete(){
            $('input[id*=confirmBtn]').attr('class', 'btn');
            return true;
    <apex:form id="frm">
        <apex:actionFunction name="callShow" action="{!show}"/>        
        <apex:outputText value="{!temp}"/>
        <apex:commandButton id="confirmBtn" value="Save" onclick="btnClick();" oncomplete="btnComplete();" reRender="frm"/>

Apex controller:

public class Sample {   
    public String temp {get;set;}
    public sample() {
    public pagereference show() {
        temp = 'Testing';
        return null;


Before clicking the Button:

While Button processing:

After clicking the Button:

1 comment:

  1. Not working properly on multiple clicks.