web-dev-qa-db-ja.com

ASP.NET RadioButtonList ListItemにCSSクラスを設定します。

ラジオボタンリストの入力項目にCSSクラスを設定する方法はありますか？これらのフォームの値をjQueryのクラスで参照したいと思います。

ListItemsにクラスが設定されたASP.NET RadioButtonListがあるとします。

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

残念ながら、「myClass」クラスは、<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に追加するという問題には至りません。）

asp.netcssradiobuttonlistlistitem
25
y0mbo

はい、RadioButtonListは恐ろしいHTMLをレンダリングします。

とにかく、jQueryから取得するのは簡単です。

試す

$('span.myclass input:radio')

上記は、クラス「myclass」のスパン内のすべてのラジオボタンを取得します。

10
SolutionYogi

サーバーコントロールのレンダリングに対応するようにCSSクラスを変更することもできます。

したがって、次の代わりにあなたのCSSで：

.myClass { ... }

あなたはこれを使う：

.myClass input { ... }

（classまたはCSSClassを介して）class属性を宣言的な方法で設定できるかどうかはわかりません。ただし、上記は回避策を提供します。

9
JamesEggers

未テスト

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

リストがレンダリングされたら、上記のステートメントを使用してcssクライアント側を操作できます。

3
Punit Vora

.NETを使用して、RowBindingイベントへのイベントハンドラーを作成できます。これにより、リスト内の各アイテム内の個々のコントロールにアクセスできます。 RadioButtonコントロールをプルしたら、プログラムでCssClassを設定して、クラスをRadioButtonレベルで適用できます。

Jqueryを使用して、myClassが適用されているラジオボタンコントロールを検索し、それに別のクラスを適用することもできます。

3番目に、MyClassの定義を変更して、MyClassが適用されている要素の下の入力要素にのみ適用されるように指定することもできます。

2
Relster

desigeek応答はかなり良いです。

これをラジオボタンで機能させるには、document.ready（）でこれを実行する必要がありました。

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

ループすることでもっと良い方法があると確信していますが、5つのラジオボタンリストをすばやく修正する必要があります。

1
Markive