title: Set focus on disabled button programatically not working
body: <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $('#save').click(function() {
          $('#save').attr('disabled', 'disabled');
          console.log($(document.activeElement).attr('id'));
      });
      $('#test').focus();
      console.log($(document.activeElement).attr('id'));
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button:focus {
    outline: 1px dotted #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body id="body"&gt;
    &lt;button id="discard" disabled="disabled"&gt;Discard&lt;/button&gt;
    &lt;button id="save"&gt;Save&lt;/button&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a <code>Discard Changes</code> button, and when clicked, the user sees a confirmation dialog that says "Are you sure you want to discard your changes?". When they click <code>OK</code>, we close the dialog and want to put focus back on the <code>Discard Changes</code> button, but we've disabled it now because there are no changes to discard. When I check the <code>document.activeElement</code> value, it's not the disabled button, it's the body element. However, when a user clicks the <code>Save</code> button, since they're physically setting focus on the element, it gets the focus so even after it's disabled, it has focus. For some reason in the snippet I'm not seeing my focus style set on the disabled Save button even though in my app I do see it.</p>
  
  <p>Is it possible to set focus on a disabled button using jQuery? If not, why not? If so, what am I doing wrong?</p>