VisualForce prevent double clicking on a button - salesforce

Question

I have done a lot of research on this, and can not figure out the best way to solve this. I am trying to prevent a user from clicking multiple times on a custom button in a VF page. When that is done, they invoke the method related to the button multiple times. I saw quite a few posts with different solutions, but most of them are on posts from 5-10 years ago.

Answer 1

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