Introduction

Adapted content for the CheckBoxList control is available through the CheckBoxListAdapter or the CssCheckBoxList control.

HTML Rendering

The CheckBoxList has two rendering modes.

1. Block mode, using RepeatLayout.Table, renders the CheckBoxList in an unordered list (ul), with each checkbox/label included in a list item (li)
2. Flow mode, using RepeatLayout.Flow, renders the CheckBoxList inside a span, with minimal additional formatting.

Sample Markup

ASP.Net Code:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" repeatLayout="Table">
	<asp:ListItem Value="0">Normal</asp:ListItem>
	<asp:ListItem Value="1" Text="Disabled" Enabled="false" />
	<asp:ListItem Value="2" Text="Selected" Selected="True" />
	<asp:ListItem Value="NoText" />
	<asp:ListItem />
</asp:CheckBoxList>

Control Adapter markup (using default RepeatLayout.Table):

<ul id="CheckBoxList1" class="checkBoxList vertical">
	<li><input id="CheckBoxList1_0" name="CheckBoxList1$0" type="checkbox" value="0" tabindex="0" /><label for="CheckBoxList1_0">Normal</label></li>
	<li class="disabled"><input id="CheckBoxList1_1" name="CheckBoxList1$1" type="checkbox" value="1" disabled="disabled" tabindex="0" /><label for="CheckBoxList1_1">Disabled</label></li>
	<li><input id="CheckBoxList1_2" name="CheckBoxList1$2" type="checkbox" value="2" checked="checked" tabindex="0" /><label for="CheckBoxList1_2">Selected</label></li>

	<li><input id="CheckBoxList1_3" name="CheckBoxList1$3" type="checkbox" value="NoText" tabindex="0" /><label for="CheckBoxList1_3">NoText</label></li>
	<li><input id="CheckBoxList1_4" name="CheckBoxList1$4" type="checkbox" tabindex="0" /></li>
</ul>

Control Adapter markup (using default RepeatLayout.Flow):

<span id="CheckBoxList1" class="checkBoxList vertical">
	<input id="CheckBoxList1_0" name="CheckBoxList1$0" type="checkbox" value="0" tabindex="0" /><label for="CheckBoxList1_0">Normal</label>
	<span class="disabled"><input id="CheckBoxList1_1" name="CheckBoxList1$1" type="checkbox" value="1" disabled="disabled" tabindex="0" /><label for="CheckBoxList1_1">Disabled</label>
	<input id="CheckBoxList1_2" name="CheckBoxList1$2" type="checkbox" value="2" checked="checked" tabindex="0" /><label for="CheckBoxList1_2">Selected</label>

	<input id="CheckBoxList1_3" name="CheckBoxList1$3" type="checkbox" value="NoText" tabindex="0" /><label for="CheckBoxList1_3">NoText</label>
	<input id="CheckBoxList1_4" name="CheckBoxList1$4" type="checkbox" tabindex="0" />
</span>

Configuration

Configuration options include the following:

A sample configuration follows.

<CheckBoxList cssClass="checkBoxList" 
	  disabledCssClass="disabled" />

Implementation Notes

Recommended Default CSS

The following is a minimum recommended default CSS, using the sample configuration shown above.

ul.checkBoxList {
	list-style:none;
	margin: 0;
	padding: 0;
}
ul.checkBoxList.horizontal li {
	display: inline;
}
ul.checkBoxList li.disabled {
	color: Gray;
}

CheckBoxList Properties Supported

The following table outlines those properties of the CheckBoxList control that are implemented in the CheckBoxListAdapter control. Properties not listed are not supported or implemented.

ListItem Properties Supported

The following table outlines those properties of the CheckBoxList control's Items collection that are implemented in the CheckBoxListAdapter control. Properties not listed are not supported or implemented.