我在一个网站上有一个页面，该页面需要用户做出一些选择。由于该网站专用于移动用户，因此我使用的是 JQuery Mobile。该网站也由 CMS 管理，这意味着我需要从用 VB.net 编写的代码隐藏文件生成页面。
现在，对于用户需要做出的每一个选择，都有一个collapsibleI make inside acollective collapsible-set。对于某些选择，会生成一个单选按钮列表。生成单选按钮是通过一个中继器完成的，该中继器遍历所有可能的选择并为每个选项生成一个单选按钮。当用户然后按下按钮确认他的选择时，选择的选项被收集并发送到服务器进行处理。
现在，我已尽力调整中继器和代码隐藏以生成必要的标签和属性以允许 JQuery Mobile 设置其布局，但这导致生成的单选按钮列表不再正常工作。每当加载页面时，它会自动检查第一个选项，并将其锁定到所述选项。另一方面，在视觉上，实际上可以选择整个单选按钮列表中的所有选项（当您选择另一个选项时，不会取消选择任何选项）。这只是视觉上的（实际上，只有第一个选择会在幕后检查，并且在尝试选择其他选择时不会改变）。
关于列表，我已经左右尝试了一些事情。我field-set在中继器周围放置了一个标签，将所有生成的单选按钮绑定在一起，并更改了代码以确保name属性是唯一的（ID 已经是唯一的）。这是我检查过的问题之一的快速链接。与我的问题没有直接关系，但我认为可以通过以下答案来解决：Jquery mobile radio button selection。
以下是 HTML 如何查找组件中的单选按钮列表之一（CMS 生成前）：
<div class="detailblock thumbs" runat="server" id="div_plants" data-role="collapsible">
<asp:Literal ID="litTitle_plants" runat="server" />
<fieldset data-role="controlgroup">
<asp:Repeater ID="repDetails_plants" runat="server">
<ItemTemplate>
<asp:Literal ID="litValue" runat="server" Visible="false" />
<asp:RadioButton ID="radPlant" runat="server" GroupName="plant" />
</ItemTemplate>
</asp:Repeater>
</fieldset>
</div>
首先，collapsible它包含植物的所有选项。第一个字面量用于设置标题collapsible. 然后我们有field-set应该将单选按钮绑定在一起的那个。最后，我们有为每株植物生成一个不可见值的中继器和一个单选按钮。
这是处理每个项目的生成的代码：
Protected Function ProcessProductPlant(sender As Object, e As System.Web.UI.WebControls.RepeaterItemEventArgs) As Boolean
Dim plant As em_clsProductSizeColorPlant = e.Item.DataItem
If plant Is Nothing Then
Return False
End If
Dim litValue As Literal = e.Item.FindControl("litValue")
litValue.Text = plant.id
Dim radPlant As RadioButton = e.Item.FindControl("radPlant")
If Not plant.Image Is Nothing Then
radPlant.Text = "<img src='" & plant.Image.ToLower & "' alt='" & plant.description & "' />"
Else
radPlant.Text = "<img src='" & "/websites/1/uploads/img/wapla/logo.jpg" & "' alt='" & plant.description & "' />"
End If
radPlant.Attributes.Add("name", "plant_choice_" & e.Item.ItemIndex)
If e.Item.ItemIndex = 0 Then
radPlant.Checked = True
litCurrentPlantId.Text = "var currentPlantId = '" & plant.id & "';"
End If
radPlant.Attributes.Add("onclick", "currentPlantId = '" & plant.id & "'; change_image();")
Return True
End Function
最后，这是植物可折叠在生成时的 HTML 外观：
<div id="ctl24_div_plants" class="detailblock thumbs" data-role="collapsible">
<h2>1. choose a plant</h2>
<fieldset data-role="controlgroup">
<span name="plant_choice_0"><input id="ctl24_repDetails_plants_ctl00_radPlant" type="radio" name="ctl24$repDetails_plants$ctl00$plant" value="radPlant" checked="checked"/><label for="ctl24_repDetails_plants_ctl00_radPlant"><img src='/websites/1/uploads/image/productimages/filrouge/plants/jpg/cycas_thumb.jpg' alt='BUSINESS 01' /></label></span>
<span name="plant_choice_1"><input id="ctl24_repDetails_plants_ctl01_radPlant" type="radio" name="ctl24$repDetails_plants$ctl01$plant" value="radPlant" /><label for="ctl24_repDetails_plants_ctl01_radPlant"><img src='/websites/1/uploads/image/productimages/filrouge/plants/jpg/sanseveria_kirkii_thumb.jpg' alt='BUSINESS 01' /></label></span>
<span name="plant_choice_2"><input id="ctl24_repDetails_plants_ctl02_radPlant" type="radio" name="ctl24$repDetails_plants$ctl02$plant" value="radPlant" /><label for="ctl24_repDetails_plants_ctl02_radPlant"><img src='/websites/1/uploads/image/productimages/filrouge/plants/jpg/zamioculcas_thumb.jpg' alt='BUSINESS 01' /></label></span>
</fieldset>
</div>
请注意已经检查了一项。实际上，可以看到所有 3 个植物都被选中，而 HTML 将只保留第一个选择。
如果你们中的任何人需要更多信息来帮助我，请随时询问。欢迎所有帮助。
编辑
我在某个地方发现所有单选按钮的组名都必须相同。在里面ItemTemplate，我已经设置了组名，但在生成的 HTML 中的任何地方都看不到它。我是否需要通过代码设置组名，或者组名不应该在生成的 HTML 中可见？
编辑2
我尝试通过强制刷新单选按钮来修复单选按钮，怀疑初始选择设置可能会破坏布局。我在 HTML 文档本身中使用了以下 JQuery 脚本来进行刷新（颜色选择是页面上的第二组单选按钮）：
$(document).ready(function () {
$("fieldset[id='plantchoices']").children("input").each("refresh");
$("fieldset[id='colorchoices']").children("input").each("refresh");
});
注意：这段脚本没有解决我的问题。