title: Using form elements - checkboxes - inside contenteditable div
body: <p>I need to place form elements (simple checkboxes) inside a <code>contenteditable</code> <code>&lt;div /&gt;</code>. It's important that checkboxes are not not for show - user needs to be able to click on them, turning them on or off. Unfortunately, they don't work while <code>contenteditable</code> is set - it's not possible to click on them nor their labels, at least in Firefox.</p>
  
  <p><a href="https://jsfiddle.net/y71nt25u/" rel="nofollow">Here's a demo</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#enable-edit').change (function() {
    $('div').attr('contenteditable', $(this).prop ('checked') ? 'true' : 'false');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div contenteditable="true"&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="fail" /&gt;&lt;label for="fail"&gt;You cannot click on me (nor edit this text) if contenteditable is true&lt;/label&gt;
    &lt;/p&gt;
    &lt;p&gt;
      ...but you can edit this text
    &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;input type="checkbox" id="enable-edit" checked /&gt;&lt;label for="enable-edit"&gt;Enable contenteditable&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there anything that can be done to remedy that without handling the click event manually via JavaScript? And if there isn't, will handling the click events on those checkboxes be an acceptable cross-browser solution?</p>