title: How to set Element as ReadOnly by clicking outside the element
body: <p>I have an <code>&lt;input&gt;</code> element set to <code>readonly</code> by default:</p>
  
  <pre><code>&lt;input readonly id="uniqueId" type="text" ondblclick="onDoubleClick(this.id)"&gt;
  </code></pre>
  
  <p>If the user double-clicks this element it will be set to editable with:</p>
  
  <pre><code>function onDoubleClick(id){
      var element = $('#'+id);
      if (element.prop('readonly')==true) { element.prop('readonly', false);}
      else { element.prop('readonly', true); } 
  </code></pre>
  
  <p>Apparently this <code>&lt;input&gt;</code> element will stay editable up until the user double clicks it again. I wonder if I could link a mouse <code>click</code> that happens outside of the <code>&lt;input&gt;</code> element to turn it into readonly again. How to achieve it?</p>