Jquery 对话框中的单选按钮答案

【问题标题】：Radio Buttons inside Jquery dialog boxJquery 对话框中的单选按钮
【发布时间】：2015-03-19 14:58:32
【问题描述】：

我正在尝试在 jquery 对话框中放置一个单选按钮选择器。单选按钮没有出现，只有确认保存和取消按钮出现。如何在我的对话框中生成 3 个单选按钮。谢谢

我的对话框代码如下：

$('#dlg-flag').dialog({
                autoOpen: false,
                width: 550,
                height: 150,
                closeOnEscape: true,
                draggable: true,
                title: 'Sequence',
            radio:{
                     flag1:function(){//send flag1 to serverside},
                     flag2:function(){send flag2 to serverside},
                     flag3:function(){send flag3 to serverside}
                   },
            buttons: {
                'Confirm Save': function () {
                      //Handle flagdata JSON and send ot serverside

                },
                'Cancel': function () {
                    $('#dlg-flag').dialog('close');
                }

            }
        });

【问题讨论】：

有问题吗？ buttons: 之前需要一个逗号。另外，radio 是什么东西？ api.jqueryui.com/dialog
@Will 是的，我的问题是在我的对话框中插入几个单选按钮。还用逗号编辑了代码。
将对话框的内容放入 $('#dlg-flag') 元素并在其上创建按钮。不要试图通过对话框的构建来做到这一点。
@j08691 我没抓到你。我应该在单独的定义中通过 html 标签创建吗？

标签： javascript jquery html jquery-ui-dialog

【解决方案1】：

按照@j08691 的建议，在html 页面的div 中添加代码：http://jsfiddle.net/FekTf/1/

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Close The Dialogue Box </title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>

    <button id="submit">Submit</button>

    <div class="dialog" title="Basic Dialog">
    <div>
        <label for="terms">Select One</label><br/>
        <input type="radio" name="add" class="terms">Address</input><br/>
        <input type="radio" name="add" class="terms">Qualification</input>
    </div>
</div>

<script>
    $("#submit").click(function(){
        $(".dialog").dialog('open'); 
    });
    $( ".dialog" ).dialog({ 
        autoOpen: false,
        modal: true,
        resizable: false,
        buttons: {
            OK: function() {
                $(this).dialog('close');
            }
        },  
        draggable: false,
        beforeClose: function( event, ui ) {
            if ( !$( ".terms" ).prop( "checked" ) ) { 
            event.preventDefault();
                $( "[for=terms]" ).addClass( "invalid" );
            }
        },
    });                 
</script>

</body>
</html>

【讨论】：