I am trying to disable a submit button after the first click on a VisualForce page. I would think the code I am using should work, but it is not. I am able to click on the button multiple times. Could anyone help me identify where the issue is?

<script type="text/javascript">
    $('button[id$=submitButton]').on('click', function(){
      $('button[id$=submitButton]').attr("disabled", true);

<apex:commandLink id="submitButton" value="{!$Label.Disaster_Submit}" action="{!saveConsent}" styleClass="btn btn-fill btn-danger btn-wd btn-sm"></apex:commandLink>

1 Answer 1


I see that you are using <apex:commandLink> I think for you to disable this you would need to use <apex:commandButton>

  • Thank you for the feedback. That actually did resolve the button issue. Would you happen to know why this jquery may not excecute if it replaces the code inside my script tags? $('input[id$=submitButton]').on('click', function(){ $('input[id$=submitButton]').attr('disabled','disabled');
    – Ivo Dimov
    Commented Mar 20, 2019 at 21:33
  • it looks like you are trying to find an input field with the id of "submitButton"? this would mean if your button is created like so: '<apex:commandButton id="submitButton"></apex:commandButton>' The button wouldn't be found. If you had this: '<apex:inputField id="submitButton"></apex:inputField>' the JS you posted SHOULD find it. Commented Mar 21, 2019 at 0:40
  • Thank you for the info Bill.I am no JS expert by any means, but when I tested button vs input, it seems like only 'inut' is working. If I run this, on page load, by button is grayed out: $( document ).ready(function(){ $('input[id$=submitButton]').attr('disabled','disabled'); }); Unfortunately, I can not use the code above, as I am trying to disable the button after it was clicked, but my original code still does not execute.
    – Ivo Dimov
    Commented Mar 21, 2019 at 12:27
  • <apex:page> <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"/> <script type="text/javascript"> $(document).ready(function(){ $('input[id$=submitButton]').click(function(){ $('input[id$=submitButton]').attr("disabled", true); return false; }); }); </script> <apex:form> <apex:commandButton disabled="false" id="submitButton" value="testValue" action="{!}" styleClass="btn btn-fill btn-danger btn-wd btn-sm"></apex:commandButton> </apex:form> </apex:page> Commented Mar 28, 2019 at 19:17
  • the above code disables you from clicking the button twice, You might need to adjust the css to make it look disabled Commented Mar 28, 2019 at 19:19

You must log in to answer this question.

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