Javascript checkboxes with <asp:checkbox />
<p>The Javascript checkbox script (<a href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/" rel="nofollow">by ryanfait</a>) worked beautifully when I used it at first. Then I needed to alter the form I made so that asp.net could process the form, but now the checkboxes are default.</p>

<p>Is there a way to alter the script to make it work on the asp:checkbox?
I call the function like so:</p>

<pre><code>$(document).ready(function() {
    $('input[type=checkbox]').checkbox(); 
    });
</code></pre>

<p>And <a href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js" rel="nofollow">here</a> is the actual javascript.</p>

<p>I have two different types of checkboxes on my page at the moment, one <code>&lt;asp:Checkbox ... /&gt;</code> and one <code>&lt;input type="checkbox" ... /&gt;</code>. The second one gets styled, the asp checkbox doesn't...</p>

<p>I haven't contacted Ryan Fait yet, as I hoped this was a common "bug".</p>

<p>EDIT:
The way the script works is, it finds all elements with class="styled", hides it and then puts a span next to the element. Somehow in my sourcecode, for the asp:checkbox this happens too early I think. Look:</p>

<pre><code>&lt;input type="checkbox" class="styled" /&gt;&lt;span class="styled"&gt;&lt;input id="ctl00_contentPlaceHolderRightColumn_newsletter" type="checkbox" name="ctl00$contentPlaceHolderRightColumn$newsletter" /&gt;&lt;/span&gt;
</code></pre>

<p>The span is there, visible and all, which it should not (I believe, as the first checkbox shows up in the style I want it to be, the second doesn't).</p>

<p><em>So far, I found a part of the problem. The javascript cannot change the asp checkbox somehow, but when I manually add the span the javascript is supposed to create, the checkbox doesn't work as a checkbox anymore. I added some details in my answer below.</em></p>
