0

私はjqueryモバイルが初めてです。

次のコードを見つけてください...

<!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 に答える