簡體   English   中英

Jquery對話框中的單選按鈕

[英]Radio Buttons inside Jquery dialog box

我試圖將單選按鈕選擇器放在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');
                }

            }
        });

按照@ j08691的建議,在html頁面的div中添加代碼: http : //jsfiddle.net/FekTf/1/

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM