Hi,
Hope you all are doing fine. I am here with a problem regarding dynamically applying css into a checkboxlist. Below are the information that i want to share with you.
HTML Code:
<label class="checkbox-inline">
<asp:CheckBoxList ID="chklstFSOptions" runat="server" RepeatDirection="Horizontal">
</asp:CheckBoxList>
</label>
C# Code:
chklstFSOptions.DataSource = dt;
chklstFSOptions.DataTextField = "FitnessOption";
chklstFSOptions.DataValueField = "FitnessOption";
chklstFSOptions.DataBind();
foreach (ListItem item in chklstFSOptions.Items)
{
//item.Attributes.Add("class", "badge");
item.Text = "<span class=\"badge\">" + item.Value + "</span>";
//chklstFSOptions.Items.Add(item);
}
HTML Output i am getting:
<label class="checkbox-inline">
<table id="MainPlaceHolder_chklstFSOptions">
<tr>
<td>
<input id="MainPlaceHolder_chklstFSOptions_0" type="checkbox" name="ctl00$MainPlaceHolder$chklstFSOptions$0" value="Gym" />
<label for="MainPlaceHolder_chklstFSOptions_0">
<span class="badge">Gym</span>
</label>
<input id="MainPlaceHolder_chklstFSOptions_1" type="checkbox" name="ctl00$MainPlaceHolder$chklstFSOptions$1" value="Yoga" />
<label for="MainPlaceHolder_chklstFSOptions_1">
<span class="badge">Yoga</span>
</label>
</td>
</tr>
</table>
</label>
My Desired Output:
<label class="checkbox-inline">
<input type="checkbox" value="" /><span class="badge">Option 2</span></label>
<label class="checkbox-inline">
<input type="checkbox" value="" /><span class="badge">Option 3</span></label>
<label class="checkbox-inline">
<input type="checkbox" value="" /><span class="badge">Option 4</span></label>
<label class="checkbox-inline">
<input type="checkbox" value="" /><span class="badge">Option 5</span></label>
How to get my desired output?
What i want is in the below link
https://jsfiddle.net/v523utfo/
If my way is not correct, kindly suggest another way to achieve the same.
Any help would be appreciated. Thanks in advance.