代码之家  ›  专栏  ›  技术社区  ›  y0mbo

在ASP.NET RadioButtonList列表项上设置CSS类

  •  24
  • y0mbo  · 技术社区  · 15 年前

    有没有办法在单选按钮列表中的输入项上设置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>
    

    不幸的是,“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>
    

    (这甚至不涉及向动态绑定的RadioButtonList添加类的问题。)

    5 回复  |  直到 9 年前
        1
  •  10
  •   SolutionYogi Eric Lippert    15 年前

    是的,RadioButtonList呈现可怕的HTML。

    无论如何,从jquery中获取它们仍然很容易。

    尝试

    $('span.myclass input:radio')
    

    上面将显示“myClass”类的范围内的所有单选按钮。

        2
  •  9
  •   JamesEggers    15 年前

    您可能希望尝试做的另一个选择是更改CSS类以适应服务器控件呈现。

    因此,在您的CSS中,而不是以下内容:

    .myClass { ... }
    

    你用这个:

    .myClass input { ... }
    

    我不知道您是否可以用声明性的方式设置class属性(通过class或cssclass);但是,上面应该给您一个解决方法。

        3
  •  3
  •   Punit Vora    15 年前

    未经测试的

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

    列表呈现后,您可以使用上面的语句来操作CSS客户端。

        4
  •  2
  •   Relster    15 年前

    使用.NET可以创建rowbinding事件的事件处理程序。这将允许您访问列表中每个项内的单个控件。一旦你拉动RadioButton控件,你可以通过编程设置它的CSSClass来将类应用到RadioButton级别。

    您还可以使用jquery来查找应用了myClass的单选按钮控件,然后将另一个类应用于该控件。

    第三,您可以更改myClass的定义,指定它只应用于已应用myClass的元素下的输入元素。

        5
  •  1
  •   Markive    15 年前

    德奇克的反应相当不错。

    要使此功能适用于单选按钮,我必须在document.ready()上执行此操作。

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

    我确信有一个更好的方法可以通过循环来实现,但是我需要一个快速修复5个单选按钮列表。