title: Label associated with checkbox does not work when checkbox moved inside label
body: <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label" rel="nofollow noreferrer">MDN - Attributes</a> says:</p>
  
  <blockquote>
    <p>A <code>&lt;label&gt;</code> can be associated with a control either by placing the control element inside the  element, or by using the <code>for</code> attribute. </p>
  </blockquote>
  
  <p>I was checking a demo for <a href="http://www.cssscript.com/animated-checkbox-with-css3-powered-animation/" rel="nofollow noreferrer">Animated Checkbox with CSS3 Powered Animation</a>. I tired to make it as label with input element inside it, based on <a href="https://stackoverflow.com/questions/8537621/possible-to-associate-label-with-checkbox-without-using-for-id">Possible to associate label with checkbox without using &quot;for=id&quot;?</a>. </p>
  
  <p>When I made the change, the checkbox is not working. Why is it not working after this change and how to fix this?</p>
  
  <p><strong>Working</strong>: <a href="https://codepen.io/anon/pen/LLPQoy" rel="nofollow noreferrer">https://codepen.io/anon/pen/LLPQoy</a></p>
  
  <p><strong>Not Working</strong>: <a href="https://codepen.io/anon/pen/qjWodj" rel="nofollow noreferrer">https://codepen.io/anon/pen/qjWodj</a></p>
  
  <p>Note: I cannot use "For" attribute in label since the input elements will be dynamically added in my actual HTML page.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="myDiv" style="padding:20px 0 20px 20px;"&gt;
  &lt;input type="checkbox" id="cbtest" /&gt;
  &lt;label for="cbtest" class="check-box"&gt;&lt;/label&gt; 
  &lt;/div&gt;
  </code></pre>