JQuery Mobile loses style when runat="server" is added to the control

Question

I'm trying to implement JQuery Mobile checkbox, but it has to be accessible form the server side.

This is the usual JQM ckeckbox:

<input type="checkbox" name="chckTOC" id="chckTOCs" class="custom" />
<label for="chckTOCs">Include Table of Content</label>

When I add runat="server" property to the checkbox it losses it's style.

I've tried using <asp:Checkbox> but still doesn't have the expected JQM style.

Any ideas how to make the control server available and still to be styled?

SOLVED see the answer

Answer 1

Thanks for the guys in the comments section I found the reason. When rendered the checkbox id is changed from chckTOC to cpmain_chckTOC and the label tag it was not valid. I've changed the label tag to <label for='cpmain_chckTOC' /> and now I've got a brand new styled checkbox as expected.

I've also managed to avoid this hardcode id -> <label for='cpmain_chckTOC' />, because it would be a problem for example, if you have your checkbox inside an APS repeater - then each checkbox id will be different something like "cpmain_repeaterid_chckTOC_1" and then "cpmain_repeaterid_chckTOC_2" and so on. And in this situation hardcoded id won't help you.

Instead I've managed to do it using only ASP.NET controls:

<asp:CheckBox runat="server" ID="chckSelectAll" CssClass="custom" />
<asp:label id="lblForChckAll" AssociatedControlID="chckSelectAll" runat="server" />

And now the result is as expected: