radiobutton不适用于jQuery移动样式吗？

Question

I'm working on my MVC project with jQuery mobile, I create a partial view page (_createanswer) and inside the page I have:

<input type ="radio" value="1" name="select-answer" id="select-answer" /> Agree
<input type ="radio" value="1" name="select-answer" id="select-answer" />Disagree
<input type ="radio" value="2" name="select-answer" id="select-answer"/>Strongly Agree 
<input type ="radio" value="3" name="select-answer" id="select-answer"/>Strongly Disagree

and this partial page integrated with the View page (details).

On my (details) page I have:

    @{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.Mobile.cshtml";

}

<div class="content_title ">
    Question @Model.Id. @Model.Name
</div>
<div class="content_area">
    <div class="text">

        @using (Html.BeginForm("Create", "MayoAnswers"))
        {
            @Html.Partial("_CreateAnswer")

            <div class="innerspacer">
                <input type="submit" value="Next" data-theme="d" />
            </div>

        }
    </div>
</div>

My question is all those radio button does not have Jquery mobile styling, can someone help please?

Answer 1

I think you might need to wrap those in a control group (or so it's shown on jQuery Docs), also labels and different id-s are not bad:

<fieldset data-role="controlgroup">
<input type ="radio" value="1" name="select-answer" id="select-answer-1" />
<label for="select-answer-1">Agree</label> 
<input type ="radio" value="1" name="select-answer" id="select-answer-2" />
<label for="select-answer-2">Disagree</label> 
<input type ="radio" value="2" name="select-answer" id="select-answer-3"/>
<label for="select-answer-3"> Strongly Agree </label>
<input type ="radio" value="3" name="select-answer" id="select-answer-4"/>
<label for="select-answer-4"> Strongly Disagree </label>
</fieldset>