title: Programmatically uncheck jQuery UI checkbox button
body: <p>I have an HTML checkbox element on my page like so:</p>
  
  <pre><code>&lt;input type="checkbox" id="locked" /&gt;&lt;label for="locked"&gt;Locked&lt;/label&gt;
  </code></pre>
  
  <p>And I make a call inside my $(document).ready() to change this to be a jQuery UI checkbox button like so:</p>
  
  <pre><code>$('#locked').button({
      'icons': {
          'primary': 'ui-icon-unlocked'
      },
      'label': 'Unlocked'
  });
  </code></pre>
  
  <p>Background context being that the user can use this button to lock/unlock a particular entity so that a background process will not alter it and it starts with an 'Unlocked' status. If javascript is not turned on, the user sees a checkbox and the label 'Locked' next to it.</p>
  
  <p>I want to be able to programmatically check/uncheck this checkbox button. I've tried:</p>
  
  <pre><code>$('#locked').attr('checked', false);
  </code></pre>
  
  <p>But the checkbox button does not update to reflect the underlying control's checked status.</p>
  
  <p>I could test the checkbox's checked property then do a .click() if it doesn't match what I want but that doesn't sound very elegant. </p>