如何将类名添加到单选列表项

Question

对于一个项目，我创建了一个新的自定义字段类型，称为 RadioList。这个 RadioList 类扩展了 RadioButtonList 类。我使用重复布局UnorderedList。

我想在输入标签中添加一个类名，例如： <input type="radio" name="rating" value="2" class="class-on-inputfield" />

类名现在被添加到输入标签周围的跨度中。我不喜欢它。 <span class="class-on-inputfield"><input type="radio" name="rating" value="2" class="" /></span>

C# 程序代码。

List<ListItem> list = new List<ListItem>();
for (int i = 1; i <= 10; i++)
{
    ListItem listItem = new ListItem()
    {
        Text = i.ToString(),
        Value = i.ToString()
    };

    listItem.Attributes.Add("class", "class-on-inputfield");
    list.Add(listItem);
}

this.RepeatLayout = RepeatLayout.UnorderedList;
this.items = list;
this.DataBind();

有谁知道我该如何解决这个问题？

非常感谢。

乔迪

Answer 1

//Default.aspx
<asp:RadioButtonList ID="rbListTest" runat="server">
</asp:RadioButtonList>

//Default.aspx.cs
    var liItem = new ListItem("Test", "Val1");       
    //Add class name to span element
    liItem.Attributes.Add("class", "spanClassNameHere");       
    rbListTest.Items.Add(liItem); 

然后在结束 /asp:content 标记之前添加以下内容

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.spanClassNameHere').find('input[type=radio]').addClass('myNewInputTagClassNameHere');
    });
</script>

输出应如下所示：

<span class="spanClassNameHere">
        <input name="ctl00$MainContent$rbListTest" class="myNewInputTagClassNameHere" id="MainContent_rbListTest_0" type="radio" value="Val1" />
        <label for="MainContent_rbListTest_0">Test</label>
    </span>