Question

我在网站上有一个页面，可以从用户那里做出一些选择。由于该网站专门针对移动用户，我使用的是JQuery Mobile。该网站也由CMS管理，这意味着我需要从用VB.net编写的代码隐藏文件生成页面。

现在，对于用户需要做出的每一个选择，我在集体collapsible内进行了collapsible-set。对于某些选择，会生成radiututtonlist。生成无线电按钮是通过一个中继器完成的，该中继器通过所有可能的选择并生成每个选项的单选按钮。当用户按下按钮确认他的选择时，将收集所选的选项并将其发送到服务器进行处理。

现在，我已经尽力调整转发器和代码隐藏以生成必要的标签和属性，以允许JQuery Mobile设置它的布局，但这导致生成的radiobuttonlists不再工作，因为它们应该。无论何时加载页面，它都会自动检查第一个选项，并将其锁定到所述选项。另一方面，在视觉上，实际上可以选择整个单选按钮列表中的所有选项（当您选择另一个选项时，不会取消选择任何选项）。这只是视觉效果（实际上，只有第一个选择在幕后进行检查，并且在尝试选择其他选项时不会改变。）

我在列表上做了一些左右的事情。我在转发器周围放了一个field-set标签，将所有生成的单选按钮绑定在一起，并更改了代码，以确保name属性是唯一的（ID已经是唯一的）。这是我检查过的一个问题的快速链接。与我的问题没有直接关系，但我认为可以通过以下答案解决：Jquery mobile radio button selection。

以下是HTML如何查找组件中的一个radiobutton列表（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中没有看到它。我是否需要通过代码设置组名，或者组ID是否应该在生成的HTML中不可见？

EDIT2

我已经尝试通过强制对radiobuttons进行刷新来修复radiobutton，怀疑初始选择设置可能会破坏布局。我在HTML文档中使用了以下JQuery脚本来进行刷新（colorchoices是页面上的第二组radiobuttons）：

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

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

Answer 1

经过大量的反复试验，我通过在每个单选按钮的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更改恢复为破碎的锁定格式，如前所述。

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

1 个答案: