Установить класс CSS для ASP.NET RadioButtonList ListItem

Есть ли способ установить класс CSS для элемента ввода в списке переключателей? Я хотел бы сослаться на эти значения формы по классу в jQuery.

Имеется ASP.NET RadioButtonList с классами, установленными в 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>

Будет отображаться как:

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

К сожалению, & quot; myClass & quot; класс добавляется к<span> который содержит элемент переключателя, а не<input> сам. Как я могу заставить его выглядеть так:

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

(Это даже не входит в проблему добавления классов к динамически связанным RadioButtonLists.)

Ответы на вопрос(5)

Решение Вопроса

Да, RadioButtonList отображает ужасный HTML.

В любом случае, их все еще легко получить из jQuery.

Пытаться

$('span.myclass input:radio')

Выше будут все переключатели внутри диапазона с классом «myclass».

 y0mbo02 июл. 2009 г., 14:20
Я надеялся, что в ASP.NET было решение, отличное от написания отсутствующего адаптера управления, но это решение, которое я использовал в итоге.

Используя .NET вы можете создать обработчик события RowBinding. Это позволит вам получить доступ к отдельным элементам управления внутри каждого элемента в списке. После извлечения элемента управления RadioButton вы можете программно настроить его CssClass для применения вашего класса на уровне RadioButton.

Вы также можете использовать jquery, чтобы найти переключатели, к которым применен myClass, а затем применить к ним другой класс.

В-третьих, вы можете просто изменить определение MyClass, указав также, что оно применяется только к элементам ввода в элементах, к которым применен MyClass.

непроверенной

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

после того, как список отрендерен, вы можете манипулировать клиентской стороной css, используя приведенный выше оператор.

ответ desigeek довольно хорош ..

Чтобы заставить это работать для радиокнопок, я должен был сделать это на document.ready ()

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

Я уверен, что есть гораздо лучший способ сделать это с помощью цикла, но мне нужно быстрое исправление для 5 списков радиокнопок.

Альтернатива, которую вы, возможно, захотите попробовать, - это изменить свой класс CSS так, чтобы он соответствовал визуализации серверного элемента управления.

Так в вашем CSS вместо следующего:

.myClass { ... }

Вы используете это:

.myClass input { ... }

Я не знаю, можете ли вы установить атрибут класса (через класс или CSSClass) декларативным способом; Тем не менее, вышесказанное должно дать вам обходной путь.

 20 сент. 2011 г., 21:16
Он отлично работает и поддерживает чистоту кода. Спасибо
 24 дек. 2014 г., 09:38
Я тоже согласен с этим. Я добавил класс в элемент управления radiobutton, и в моем css было: .myClass & gt; input [type = & quot; radio & quot;] {...}. Работает удовольствие и держит его в чистоте

Ваш ответ на вопрос