Question

我正在尝试将单选按钮选择器放在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');
                }

            }
        });

Answer 1

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

Answer 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>

Jquery对话框中的单选按钮

2 个答案: