title: jquery check items if the parent list item is not hidden
body: <p>I have a "select all" checkbox. I want to iterate for each checkbox that contains the class <code>cb-org</code> and set the <code>checked</code> property but only if the parent list item element does not have the class <code>hidden</code> applied to it.</p>
  
  <p>The reason for this is because I have a client-side filter so not all list items are visible and I don't want my "select all" to set the <code>checked</code> property for items that are currently hidden.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#organisations-selectall').change(function() {
    $('.cb-org').each(function (i, obj) {
      if (!$(obj).parent('li').hasClass('hidden')) {
        $(obj).prop('checked', this.checked);
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;Filter&lt;/span&gt;
       &lt;input id="org-filter" type="text" class="form-control"&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="checkbox"&gt;
        &lt;label&gt;
          &lt;input id="organisations-selectall" type="checkbox"&gt;
          &lt;strong&gt;Select All&lt;/strong&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="attr-org-entity hidden"&gt;
      &lt;div class="checkbox"&gt;
        &lt;label&gt;
          &lt;input type="checkbox" class="cb-org"&gt;
          Org 1
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="attr-org-entity"&gt;
      &lt;div class="checkbox"&gt;
        &lt;label&gt;
          &lt;input type="checkbox" class="cb-org"&gt;
          Org 2
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="attr-org-entity"&gt;
      &lt;div class="checkbox"&gt;
        &lt;label&gt;
          &lt;input type="checkbox" class="cb-org"&gt;
          Org 3
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>