0

我是 jquery mobile 的新手。

请找到以下代码...

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script>
        var count = 1;
        var newSet = '<div data-role="fieldcontain">' + 
            '<fieldset data-role="controlgroup">'+
             '</fieldset></div>';

        $(function (){
            $('.cbDiv').append(newSet);
        }) ;            

        $(document).on("click", ".add", function() {                        
            newSet = newSet += '<input type="radio" name="radio' + count + '" id="radio' + count + '" value="radio' + count + '" />' + 
            '<label for="radio' + count + '">radio' + count + '</label>';
            $(".cbDiv").html(newSet);           
            count++;
        });

    </script>
</head>
<body>
    <div data-role="page" id="page">
        <div data-role="content">
            <input type="button" class="add" value="Add Radio Button" />
            <div class="cbDiv"></div>
        </div>
    </div>
</body>

我在 jquery mobile 中动态添加单选按钮。它工作正常.. 但是，它不能用作单选按钮（即单选）。它作为一个复选框工作。（即多选）。

如何防止这种情况？

样式也未应用。

4

1 回答 1

0

使用单选按钮，您需要提供name属性。如果您为每个框指定相同的名称，那么它将表现为单个选择而不是复选框。在您的情况下，它们会随每个单选按钮命名属性更改。您应该从中删除该数字，它应该可以按预期工作。

这个jsfiddle展示了它是如何工作的。

如果您使用正确的类和 CSS 选择器，则应该应用该样式。如果没有，你添加了错误的类或者你的 CSS 有错误。

编辑：我看到你使用radioas id。您可能应该使用它class，因为id应该只用于页面上的单个元素。

于 2013-01-16T08:08:13.773 回答