Set a CSS class on an ASP.NET RadioButtonList ListItem

Question

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

Solution 1

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

Solution 2

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.

Solution 3

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.

Solution 4

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.

Solution 5

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

View more solutions