title: Knockout attr binding with attributes like 'readonly' and 'disabled'
body: <p>What's the suggested "best practice" way to use <strong>Knockout's "attr" data binding</strong> with standalone attributes like <strong>"readonly"</strong> and <strong>"disabled"</strong>?</p>
  
  <p>These attributes are <em>special</em> in that they are generally enabled by setting the attribute value to the attribute name (although many browsers work fine if you simply include the attribute names without any values in the HTML):  </p>
  
  <pre><code>&lt;input type="text" readonly="readonly" disabled="disabled" value="foo" /&gt;
  </code></pre>
  
  <p>However, if you <strong>don't</strong> want these attributes to be applied, the general practice is to simply omit them altogether from the HTML (as opposed to doing something like readonly="false"):</p>
  
  <pre><code>&lt;input type="text" value="foo" /&gt;
  </code></pre>
  
  <p>Knockout's "attr" data binding doesn't support this scenario. As soon as I provide an attribute name, I need to provide a value as well:</p>
  
  <pre><code>&lt;input type="text" data-bind="attr: { 'disabled': getDisabledState() }" /&gt;
  </code></pre>
  
  <p>Is there a cross-browser way turn off 'disabled' or 'readonly'? Or is there a trick with a <strong>custom binding</strong> that I can use to not render <strong>anything</strong> if I don't want the item disabled or made read-only?</p>