页面引用：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/jquery-ui-bootstrap-v0.5pre/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet" /> <link href="css/bootstrap.min.css" rel="stylesheet" /> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery-ui-1.10.4.min.js"></script> </head> <body> <div id="dialog">asdfasdf</div> <script type="text/javascript"> $(function () { $("#dialog").dialog({ 500, height: 400, autoOpen: true, resizable: false, buttons: [ { id: "okaybutton", text: "okay" }, { id: "nookaybutton", text: "nookay" }, { id: 'checkboxplaceholder', text: "勾选框", } ], open: function () { $("#okaybutton").removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only") .addClass("btn btn-primary"); $("#nookaybutton").removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only") .addClass("btn btn-default"); //replace send email button with a checkbox $("#checkboxplaceholder").replaceWith("<label class='sendEmailText' for='sendEmailCheckBox'>发送邮件提醒</label><input type='checkbox' class='sendEmailCheckBox' id='sendEmailCheckBox' checked />"); } }); }); </script> <style type="text/css"> .saveAndCreateNext { background-color: black !important; } .sendEmailCheckBox { position: absolute; left: 20px; margin-top: 17px !important; } .sendEmailText { position: absolute; margin-top: 15px; left: 40px; color: #333333; } </style> </body> </html>
按照头中的路径引用到对应文件（jquery-ui-bootstrap-v0.5precsscustom-theme路径下会有images图片，勿忘）
效果如下：
提交时用checkbox的id拿对应的值（var isSendEmail = $("#sendEmailCheckBox").prop("checked");）；