Set a CSS class on an ASP.NET RadioButtonList List

2019-01-25 02:41发布

Is there any way to set a CSS class on an input item in a radio button list? I'd like to reference these form values by class in jQuery.

Given an ASP.NET RadioButtonList with classes set on the ListItems:

 <asp:RadioButtonList ID="RadioButtonList" runat="server">
      <asp:ListItem class="myClass" Text="Yes" Value="1" />
      <asp:ListItem class="myClass" Text="No" Value="0" />
 </asp:RadioButtonList>

Will render as:

 <span id="RadioButtonList" class="radioButtonListField myClass">
     <span class="myClass">
          <input id="RadioButtonList_0" type="radio" value="1" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_0">Yes</label>
     </span>
     <span class="myClass">
          <input id="RadioButtonList_1" type="radio" value="0" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_1">No</label>
     </span>
 </span>

Unfortunately, the "myClass" class is added to the <span> that contains the radio button item, not the <input> itself. How could I get it to look like this instead:

 <span id="RadioButtonList" class="radioButtonListField myClass">
     <span>
          <input id="RadioButtonList_0" class="myClass" type="radio" value="1" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_0">Yes</label>
     </span>
     <span>
          <input id="RadioButtonList_1" class="myClass" type="radio" value="0" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_1">No</label>
     </span>
 </span>

(This does not even get into the issue of adding the classes to dynamically bound RadioButtonLists.)

5条回答
萌系小妹纸
2楼-- · 2019-01-25 03:03

untested

$('.myclass input:radio').each(function() {
        this.css({'style-name':'style-value'})
)};

once the list is rendered, you can possibly manipulate the css client side using the above statement.

查看更多
贪生不怕死
3楼-- · 2019-01-25 03:15

Yes, RadioButtonList renders horrible HTML.

Anyway, it's still easy to get them from jQuery.

Try

$('span.myclass input:radio')

Above will get all the radio buttons inside the span with class 'myclass'.

查看更多
淡お忘
4楼-- · 2019-01-25 03:21

the desigeek response is pretty good..

To get this to work for radiobuttons I had to do this on document.ready()

$('#<%=radRisksMarginTrading.ClientID  %>_0').addClass("validate[required]");
$('#<%=radRisksMarginTrading.ClientID  %>_1').addClass("validate[required]");

I'm sure there is a much better way to do it by looping but I need a quick fix for 5 radiobutton lists..

查看更多
孤傲高冷的网名
5楼-- · 2019-01-25 03:25

An alternative you may want to try to do is change your CSS class to accomindate the Server Control Rendering.

So in your CSS instead of the following:

.myClass { ... }

You Use this:

.myClass input { ... }

I don't know if you can set the class attribute (via class or CSSClass) in a declarative manner; however, the above should give you a work around.

查看更多
干净又极端
6楼-- · 2019-01-25 03:25

Using .NET you could create an event handler to the RowBinding event. This would allow you to access the individual controls within each item in the list. Once you pull the RadioButton control, you could programaticaly set it's CssClass to apply your class on the RadioButton level.

You could also use jquery to find the radio button controls that have myClass applied, and then apply another class to that.

Third, you could just change the definition of MyClass to also specify that it's only applied to input elements under elements that have MyClass applied.

查看更多
登录 后发表回答