title: Clicking on label not checking checkbox if hidden when using IE 7 or 8
body: <p>I am trying to create a custom designed checkbox using the label associated to a checkbox element and hiding (display:none) the checkbox.</p>
  
  <p>This works fine in all browsers except IE, which requires the checkbox to be visible for the label to be clickable.</p>
  
  <p>Here's my code...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="checkbox" id="myCheck" /&gt;​
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>label.checkbox {
      border:1px solid #666;
      width:25px;
      height:23px;
      display:block; 
  }​
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>$("input[type=checkbox]").each(function() {
      $(this).hide().before('&lt;label for="' + $(this).attr("id") + '" class="checkbox"&gt;&lt;/label&gt;');
  });
  
  $("input[type=checkbox]").live('change', function() {
      if ($(this).prop('checked') == true) {
          $('label[for=' + $(this).attr("id") + ']').html("X")
      } else {
          $('label[for=' + $(this).attr("id") + ']').html("")
      }
  });​
  </code></pre>
  
  <p>Or <a href="http://jsfiddle.net/many_tentacles/hR6yf/1/" rel="noreferrer">jsfiddle</a></p>