title: Checking if all items in a <select> drop down have a particular class
body: <p>I have a <code>&lt;select&gt;</code> drop-down list of item options. If an item is 'out of stock', that <code>&lt;option&gt;</code> has a class of 'out-of-stock'.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;select&gt;
      &lt;option value="red"&gt;Red&lt;/option&gt;
      &lt;option value="blue" class="out-of-stock" disabled="disabled"&gt;Blue&lt;/option&gt;
      &lt;option value="green"&gt;Green&lt;/option&gt;
      &lt;option value="yellow" class="out-of-stock" disabled="disabled"&gt;Yellow&lt;/option&gt;
  &lt;/select&gt;
  &lt;p class="message hidden"&gt;Sorry, this item is out of stock&lt;/p&gt;
  </code></pre>
  
  <p>This is what I'm trying to achieve:</p>
  
  <p>If <strong>all</strong> options have a class of "out-of-stock", then hide the whole <code>&lt;select&gt;</code> drop-down and remove the "hidden" class from the <code>&lt;p&gt;</code> element.</p>
  
  <p>I've tried the following, but this hides the whole <code>&lt;select&gt;</code> even if just one <code>&lt;option&gt;</code> has the class "out-of-stock":</p>
  
  <pre><code>$("select").each(function(){
      if ($(this).children("option").hasClass("out-of-stock")) {
          $(this).addClass("hidden");
          $("p.message").removeClass("hidden");
  }
  }); 
  </code></pre>
  
  <p>...any ideas how to hide the <code>&lt;select&gt;</code> only if <strong>all</strong> items are "out-of-stock"? Thanks!</p>