Bug with jQuery UI checkbox .button() Style does not change when script changes checked value

Bug with jQuery UI checkbox .button() Style does not change when script changes checked value

  1. <input type="checkbox" id="check" /><label for="check">Toggle</label>

  2. <input type="button" id="button1" value="Turn it off" />
  3. <script>
  4. // make the checkbox a jquery ui button
  5. $('#check').button();
  6. // make the button turn off the Toggle checkbox
  7. $('#button1').addListener('click', function(e){
  8.       alert($('#check').attr('checked'));
  9.       $('#check').attr('checked', false);
  10.       alert($('#check').attr('checked'));
  11. });
  12. </script>
The style of the toggle button will not change, even though the attribute has been changed.  So if a form is submitted or the data collected, the actual value of the toggle is obscured.  There does not appear to be any specialized button method for this.  So the only way to toggle the button (visibly) is by actually clicking the button.