title: Javascript checkboxes with <asp:checkbox />
body: <p>The Javascript checkbox script (<a href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/" rel="nofollow noreferrer">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 noreferrer">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>