Asp.net Radiobuttonlist直观地允许多个选择并锁定到第一个选择

我在一个网站上有一个页面，可以从用户那里获得一些选择。因为这个网站是专门为移动用户服务的，所以我使用JQuery mobile。该网站也由CMS管理，这意味着我需要从VB.net中编写的代码隐藏文件生成页面

现在，对于用户需要做出的每一个选择，在一个集合的可折叠集合中都有一个可折叠集合。对于某些选项，会生成radiobuttonlist。生成单选按钮是通过一个中继器完成的，该中继器通过所有可能的选择并为每个选项生成一个单选按钮。当用户按下按钮确认其选择时，所选选项将被收集并发送到服务器进行处理

现在，我已经尽力调整转发器和代码，以生成必要的标记和属性，允许JQuery Mobile设置其布局，但这导致生成的RadioButtonList不再正常工作。 无论何时加载页面，它都会自动检查第一个选项，并将其锁定到所述选项。另一方面，从视觉上看，实际上可以选择整个radiobutton列表中的所有选项。选择其他选项时，不会取消选择任何选项。这在现实中只是视觉上的，只有第一个选择在幕后被检查，并且在尝试选择其他选择时不会改变

关于这个列表，我已经做了很多尝试。我在中继器周围放置了一个字段集标签，将所有生成的单选按钮绑定在一起，并修改了代码，以确保名称属性是唯一的ID已经是唯一的。这是我查过的一个问题的快速链接。与我的问题没有直接关系，但我认为可以通过以下答案来解决：

以下是HTML如何在组件预CMS生成中查找其中一个radiobutton列表：

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

最后，以下是生成plant Collasible时的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>

---

注意：这段脚本并没有解决我的问题。

经过多次尝试和错误，我通过在每个radiobutton的onmouseup属性上附加以下JavaScript片段，成功地实现了我想要的：

function uncheck_others(radiobuttonId) {

        $('#' + radiobuttonId).parent().parent().parent().children().children().children('input').attr('checked', false);
        $('#' + radiobuttonId).attr('checked', true).checkboxradio('refresh');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label').removeClass('ui-radio-on');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label').children().children().removeClass('ui-icon-radio-on');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label').addClass('ui-radio-off');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label').children().children().addClass('ui-icon-radio-off');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label[for=' + radiobuttonId + ']').removeClass('ui-radio-off');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label[for=' + radiobuttonId + ']').children().children().removeClass('ui-icon-radio-on');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label[for=' + radiobuttonId + ']').addClass('ui-radio-on');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label[for=' + radiobuttonId + ']').children().children().addClass('ui-icon-radio-off');
    }

我意识到这个脚本是非常不切实际的，不可读的，并且可能有更有效的方法来解决这个问题。我把这个脚本留在这里，以备将来参考

我仍然想指出，在我的特定情况下，这个脚本必须附加到onmouseup事件，而不是onmouseclick事件。将其附加到onmouseup事件导致JQuery将我的JS更改恢复为前面提到的已断开锁定的格式

$(document).ready(function () {
    $("fieldset[id='plantchoices']").children("input").each("refresh");
    $("fieldset[id='colorchoices']").children("input").each("refresh");
});

function uncheck_others(radiobuttonId) {

        $('#' + radiobuttonId).parent().parent().parent().children().children().children('input').attr('checked', false);
        $('#' + radiobuttonId).attr('checked', true).checkboxradio('refresh');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label').removeClass('ui-radio-on');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label').children().children().removeClass('ui-icon-radio-on');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label').addClass('ui-radio-off');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label').children().children().addClass('ui-icon-radio-off');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label[for=' + radiobuttonId + ']').removeClass('ui-radio-off');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label[for=' + radiobuttonId + ']').children().children().removeClass('ui-icon-radio-on');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label[for=' + radiobuttonId + ']').addClass('ui-radio-on');
        $('#' + radiobuttonId).parent().parent().parent().children().children().children('label[for=' + radiobuttonId + ']').children().children().addClass('ui-icon-radio-off');
    }