Question

I am using an asp.net asp:CheckBoxList with RepeatLayout=”UnorderedList”

It has always rendered the output as (with some values missing for brevity)

<ul class="checkbox unstyled">
  <li><input type="checkbox" value="17"><label>Label Name</label></li>              
</ul>

but all of a sudden I am getting a span rendered into the list

<ul class="checkbox unstyled">
  <li><span alt="17"><input type="checkbox" value="17"><label>Label Name</label></span></li>                
</ul>

being produced by the following code

<div class="control-group" >                
  <label class="control-label" id="Label2">Available Mailing Lists</label>
    <div class="controls">            
      <asp:CheckBoxList id="chklSubs" runat="server" RepeatLayout="UnorderedList" CssClass="checkbox unstyled"></asp:CheckBoxList>
    </div>
</div>

It’s messing with my CSS and making the list break. Why would I be getting this span and how do I get rid of it?

Side note I am styling with twitter bootstrap.

full output

<ul id="ContentPlaceHolderDefault_override_innerPageOverRide_BoilerplateMainContentPlaceHolder_ctl00_SignUpCtl_4_chklSubs" class="checkbox unstyled">
  <li><span alt="7"><input id="ContentPlaceHolderDefault_override_innerPageOverRide_BoilerplateMainContentPlaceHolder_ctl00_SignUpCtl_4_chklSubs_0" type="checkbox" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$override$innerPageOverRide$BoilerplateMainContentPlaceHolder$ctl00$SignUpCtl_4$chklSubs$0" value="7"><label for="ContentPlaceHolderDefault_override_innerPageOverRide_BoilerplateMainContentPlaceHolder_ctl00_SignUpCtl_4_chklSubs_0">Energy Express Newsletter</label></span></li>
</ul>

Answer 1

If you put any CssClass or other attribute on the control, the checkbox will be nested into a span. If you disable the checkbox control for instance within your code the ‘disabled’ attribute is set on the span-tag. I notices it because jQuery couldn’t remove this attribute using the input-selector (only not working in IE).

This does work in all normal browsers so try this one:

$("div#" + value + " input:checked").removeAttr('disabled');

This you have to add to let it work in IE:

$("div#" + value + " span").removeAttr('disabled');

Take a look here:
C# asp.net: How to remove span tag from WebControl when rendered