How to turn a jquery ui dialog button into a checkbox?

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.

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.

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.

Thank you in advance for all your help,

Edit: Here is some code I have tried. My problem is now that i try to style the button pane, it disappears.

var dialog = $('<div title="Create News Post">' +
                    '<form method="POST" action="index.php?controller=posts&action=add">' +
                        '<div id="tabs" class="form">' +
                            '<ul>' +
                                '<li><a href="#tabs-1">English</a></li>' +
                                '<li><a href="#tabs-2">French</a></li>' +
                            '</ul>' +
                            '<div id="tabs-1">' +
                                '<开发者_开发百科label class="first">' +
                                    '<span>English Title:</span>' +
                                    '<input type="text" name="en_title" />' +
                                '</label>' +
                                '<label>' +
                                    '<span>English Text:</span>' +
                                    '<textarea name="en_text">' +
                                    '</textarea>' +
                                '</label>' +
                            '</div>' +
                            '<div id="tabs-2">' +
                                '<label class="first">' +
                                    '<span>French Title:</span>' +
                                    '<input type="text" name="fr_title" />' +
                                '</label>' +
                                '<label>' +
                                    '<span>French Text:</span>' +
                                    '<textarea name="fr_text">' +
                                    '</textarea>' +
                                '</label>' +
                            '</div>' +
                        '</div>' +
                        '<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">' +
                            '<div class="ui-dialog-buttonset">' +
                                '<input type="checkbox" id="isDraft" /><label for="isDraft">Publish?</label>' +
                                '<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">' +
                                    '<span class="ui-button-text">Save</span>' +
                                '</button>' +
                                '<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">' +
                                    '<span class="ui-button-text">Cancel</span>' +
                                '</button>' +
                            '</div>' +
                        '</div>' +
                    '</form>' +
                '</div>'
            )
            .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600});

1) You can add the buttons and checkbox into the HTML that creates the dialog and not the use dialog's property that generates buttons for you. Once you create the dialog you can set the handlers using the dialog object in the selector:

dialog = $('<div>' +
           '...' +
           '<input type="submit" id="btnCancel" value="Ok" />' +
           '<button id="btnCancel">Cancel</button>' +
           '<input type="checkbox" id="chkIsDraft" name="chkIsDraft" value="Is Draft" />' +
           '</div>')
            .dialog(autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false});

$('#btnCancel', dialog).click(function(){
 //...
});

dialog.dialog('open');

EDIT: Without reading jQuery UI code it seems that a div with a class attribute like 'ui-dialog-buttonpane' will be removed from the dialog html. So if you choose this approach you must avoid reusing the jQuery UI dialog classes.

2) Other approach could be add a third button using the dialog's property and substitute the third button html for your checkbox:

//Again use the dialog object as the scope for the selector.
$('.ui-dialog-buttonpane button:eq(1)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');

EDIT: The object returned by dialog correctly refers to the DOM element using in the creation of the dialog instead of all the machinery to make the dialog work. That is way you will need to use dialog.parent() as the scope of the above selector.

3) A third option: Use a regular button that provides the same check/uncheck semantic that a checkbox (I mean visually, craft some CSS), when this button is clicked just make sure some hidden field in the dialog markup (Im thinking in a form you will post after the OK is pressed) gets updated to reflect the check state.

$("<div>...</div>").dialog({
    modal: true /..
    },
    buttons: {
        //...
        'IsDraft': function() {
            $(this).toggleClass('checked')
            $("input[name='is_draft']",$(this).parent('form')).val($(this).hasClass('checked'));
        }
    }
});

EXAMPLE (BASED IN YOUR CODE):

var dialog = $('<div title="Create News Post">' +
                    '<form method="POST" action="index.php?controller=posts&action=add">' +
                        '<div id="tabs" class="form">' +
                            '<ul>' +
                                '<li><a href="#tabs-1">English</a></li>' +
                                '<li><a href="#tabs-2">French</a></li>' +
                            '</ul>' +
                            '<div id="tabs-1">' +
                                '<label class="first">' +
                                    '<span>English Title:</span>' +
                                    '<input type="text" name="en_title" />' +
                                '</label>' +
                                '<label>' +
                                    '<span>English Text:</span>' +
                                    '<textarea name="en_text">' +
                                    '</textarea>' +
                                '</label>' +
                            '</div>' +
                            '<div id="tabs-2">' +
                                '<label class="first">' +
                                    '<span>French Title:</span>' +
                                    '<input type="text" name="fr_title" />' +
                                '</label>' +
                                '<label>' +
                                    '<span>French Text:</span>' +
                                    '<textarea name="fr_text">' +
                                    '</textarea>' +
                                '</label>' +
                            '</div>' +
                        '</div>' +
                    '</form>' +
                '</div>'
            )
            .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600,height:400,
                buttons: {
                    IsDraft: function(){alert('draft');},
                    Save: function(){alert('saving');},
                    Cancel: function(){alert('cancel');}
                }
            });
         //lets do a replacement to get a checkbox in the button pane.     
        $('.ui-dialog-buttonset button:eq(0)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');
        dialog.dialog('open');

Maybe it'll help: look at the JQuery UI button. It can work as a checkbox. You can create separate button in the dialog for your purposes.