title: disable jquery-chosen dropdown
body: <p>I have a select div that I'm using the <a href="http://harvesthq.github.io/chosen/" rel="noreferrer">chosen jquery plugin</a> to style and add features to (most notably, search).  The div looks something like this,</p>
  
  <pre><code> &lt;select data-placeholder="add a foobar" id="foobar" style="width: 350px;"&gt;
   &lt;option value=""&gt;&lt;/option&gt;
   &lt;/select&gt;
  </code></pre>
  
  <p>And I'm using the chosen plugin like this,</p>
  
  <pre><code> $('#foobar').chosen();
  </code></pre>
  
  <p>While some AJAX is loading, I'd like to disable the entire <code>&lt;select&gt;</code> div.  Maybe with something like this,</p>
  
  <pre><code> $('#foobar').disable()
  </code></pre>
  
  <p>or this</p>
  
  <pre><code> $('#foobar').prop('disabled', true)
  </code></pre>
  
  <p>I think you get the idea.</p>
  
  <p>Any ideas on how to do this?  I've tried a number of different things, like using jquery idioms for disabling things, disabling the <code>&lt;select&gt;</code> which just disables the underlying select, not the chosen stuff on top of it.  I've even resorted to manually adding another div with a high <code>z-index</code> to just grey out the box, but I think that this is likely to be ugly and buggy.</p>
  
  <p>Thanks for the help!</p>