title: Disabled jQuery UI Button Remains Disabled on Returning to Page
body: <p>I have a <a href="http://jqueryui.com/demos/button/" rel="nofollow">JQuery UI</a> submit button on a form when it's clicked to both prevent double-clicking and to also make it visibly clear that it was in fact clicked properly.</p>
  
  <p>So I use jQuery to do this:</p>
  
  <pre><code>$('input:submit').click(function() {
      $(this).button('disable');
  });
  </code></pre>
  
  <p>It works, but the problem is when the user hits their back button it <strong><em>remains disabled</em></strong>.  What's the proper way to disable a submit button when clicked?  I obviously use jQuery, so preference is to use jQuery.</p>
  
  <p><em><strong>UPDATE</strong></em>: many people suggested I use <code>$(document).ready(function() {$('input:submit').button('enable');});</code> to overcome this persistent disabling of the button.  It turns out that won't work if it comes before my button initialization call in <code>$(function() {}</code>.  But if I put that button('enable') after my button initialization code, even in the <code>$(function() {})</code> section, then it works as expected.</p>
  
  <p>But now I realize this whole button disabling only works in Firefox!  <strong><em>If I disable the button, the form won't submit</em></strong> in IE and Chrome (haven't tested others)!</p>
  
  <p><em><strong>UPDATE 2</strong></em>: I finally got this to work, though a bit concerned some browsers are not going to be able to submit things with these workarounds...  Here's my final code, would love to hear opinions of potential issues:</p>
  
  <pre><code>$(function() {
      $('input:submit').button().click(function() {
          $(this).button('disable');
          $(this).closest('form').submit();
          return false;
      });
      $('input:submit').button('enable');
  });
  </code></pre>