title: How to turn a jquery ui dialog button into a checkbox?
body: <p>So I'm new to Jquery and Jquery UI.  I have my dialog box working but one thing I am looking for is how to change one of the buttons in the dialog into a checkbox.</p>
  
  <p>My scenario:
  A user will be posting information, like news and such.  But I want to give them the ability to not publish it to the public yet.  A draft, if you will.  So the checkbox would be right beside the "ok" and "cancel" button.</p>
  
  <p>I've tried creating an array before the dialog function and placing it there but I can't seem to find a way to declare a button as a checkbox.</p>
  
  <p>Thank you in advance for all your help,</p>
  
  <p>Edit:  Here is some code I have tried.  My problem is now that i try to style the button pane, it disappears.</p>
  
  <pre><code>var dialog = $('&lt;div title="Create News Post"&gt;' +
                      '&lt;form method="POST" action="index.php?controller=posts&amp;action=add"&gt;' +
                          '&lt;div id="tabs" class="form"&gt;' +
                              '&lt;ul&gt;' +
                                  '&lt;li&gt;&lt;a href="#tabs-1"&gt;English&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;li&gt;&lt;a href="#tabs-2"&gt;French&lt;/a&gt;&lt;/li&gt;' +
                              '&lt;/ul&gt;' +
                              '&lt;div id="tabs-1"&gt;' +
                                  '&lt;label class="first"&gt;' +
                                      '&lt;span&gt;English Title:&lt;/span&gt;' +
                                      '&lt;input type="text" name="en_title" /&gt;' +
                                  '&lt;/label&gt;' +
                                  '&lt;label&gt;' +
                                      '&lt;span&gt;English Text:&lt;/span&gt;' +
                                      '&lt;textarea name="en_text"&gt;' +
                                      '&lt;/textarea&gt;' +
                                  '&lt;/label&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;div id="tabs-2"&gt;' +
                                  '&lt;label class="first"&gt;' +
                                      '&lt;span&gt;French Title:&lt;/span&gt;' +
                                      '&lt;input type="text" name="fr_title" /&gt;' +
                                  '&lt;/label&gt;' +
                                  '&lt;label&gt;' +
                                      '&lt;span&gt;French Text:&lt;/span&gt;' +
                                      '&lt;textarea name="fr_text"&gt;' +
                                      '&lt;/textarea&gt;' +
                                  '&lt;/label&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"&gt;' +
                              '&lt;div class="ui-dialog-buttonset"&gt;' +
                                  '&lt;input type="checkbox" id="isDraft" /&gt;&lt;label for="isDraft"&gt;Publish?&lt;/label&gt;' +
                                  '&lt;button id="btnSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"&gt;' +
                                      '&lt;span class="ui-button-text"&gt;Save&lt;/span&gt;' +
                                  '&lt;/button&gt;' +
                                  '&lt;button id="btnCancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"&gt;' +
                                      '&lt;span class="ui-button-text"&gt;Cancel&lt;/span&gt;' +
                                  '&lt;/button&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                      '&lt;/form&gt;' +
                  '&lt;/div&gt;'
              )
              .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600});
  </code></pre>