asp.net - net - radiobuttonlist css

Establecer una clase CSS en un elemento de lista de lista de radioButtonList de ASP.NET

Question

¿Hay alguna forma de establecer una clase CSS en un elemento de entrada en una lista de botones de opción? Me gustaría hacer referencia a estos valores de forma por clase en jQuery.

Dado un RadioButtonList de ASP.NET con clases establecidas en el 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>

Se renderizará como:

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

Desafortunadamente, la clase "myClass" se agrega a la <span> que contiene el elemento del botón de opción, no a la <input> sí. ¿Cómo podría conseguir que se vea así?

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

(Esto ni siquiera entra en el tema de agregar las clases a RadioButtonLists enlazadas dinámicamente).

Answer 1

Sí, RadioButtonList rinde horrible HTML.

De todos modos, todavía es fácil obtenerlos de jQuery.

Tratar

$(''span.myclass input:radio'')

Encima obtendremos todos los botones de radio dentro del lapso con la clase ''myclass''.

Answer 2

Una alternativa que quizás desee intentar hacer es cambiar su clase de CSS para que coincida con la Representación de control del servidor.

Así que en tu CSS en lugar de lo siguiente:

.myClass { ... }

Usted utiliza esto:

.myClass input { ... }

No sé si puede establecer el atributo de clase (a través de clase o CSSClass) de manera declarativa; Sin embargo, lo anterior debe darle una solución.

Answer 3

Usando .NET puede crear un controlador de eventos para el evento RowBinding. Esto le permitiría acceder a los controles individuales dentro de cada elemento de la lista. Una vez que haya presionado el control RadioButton, puede programar programáticamente que es CssClass para aplicar su clase en el nivel de RadioButton.

También puede usar jquery para encontrar los controles de los botones de opción que tienen myClass aplicado, y luego aplicar otra clase a eso.

En tercer lugar, podría cambiar la definición de MyClass para especificar que solo se aplica a elementos de entrada en elementos que tienen MyClass aplicado.

Answer 4

la respuesta desigeek es bastante buena ..

Para que esto funcione para los botones de radio tuve que hacer esto en document.ready ()

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

Estoy seguro de que hay una forma mucho mejor de hacerlo en bucle pero necesito una solución rápida para 5 listas de botones de radio ...

Answer 5

no probado

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

una vez que la lista se haya procesado, posiblemente pueda manipular el lado del cliente css usando la declaración anterior.