How do I create a non content editable div inside a content editable iframe?

Question

I need to make a some parts inside an contenteditable iframe as non-editable. How do I do that? The below code works in chrome but not in firefox. Everything is editable in firefox. Ineed the checkbox to be noneditable

<iframe contentEditable="true" >
    Editable text<div contentEditable="false"><input type="checkbox" /></div>
</iframe>

Answer 1

Use this:

Editable text<div contentEditable="false" readonly>Non content editable text</div>

If you want to use JQuery:

$('#divId').attr('readonly', 'true');