title: Nested parent/child checkboxes - working solution need adjustment help for Bootstrap
body: <p>I have been looking for a 'complete' solution to nesting parent child checkboxes that change state correctly based on a hierarchy.</p>
  
  <p>Most 'solutions' do not work or only work to one level. They also require you to name the checkboxes in a particular way.</p>
  
  <p><a href="https://stackoverflow.com/questions/18339389/auto-check-parent-checkbox">This</a>  Stack Overflow discussion covers the main points but also provide a good solution discovered by Rory <a href="http://css-tricks.com/indeterminate-checkboxes/" rel="noreferrer">here</a>.</p>
  
  <p>I have tested it within my development project and it works perfectly standalone. However, I am using Bootstrap 2.x and for checkboxes </p>
  
  <p>I have a <a href="http://jsfiddle.net/Mvs87/1/" rel="noreferrer">JSFiddle</a> which shows the working example code, then my version with a disabled parent checkbox and then the bootsrap code version which does not work.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;body&gt;
  &lt;!-- Raw working example from site http://css-tricks.com/indeterminate-checkboxes/ --&gt;
  
  &lt;b&gt;Raw working example&lt;/b&gt;
  &lt;p&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;input type="checkbox" name="tall" id="tall"&gt;
          &lt;label for="tall"&gt;Tall Things&lt;/label&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" name="tall-1" id="tall-1"&gt;
                  &lt;label for="tall-1"&gt;Buildings&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" name="tall-2" id="tall-2"&gt;
                  &lt;label for="tall-2"&gt;Giants&lt;/label&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;input type="checkbox" name="tall-2-1" id="tall-2-1"&gt;
                          &lt;label for="tall-2-1"&gt;Andre&lt;/label&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;input type="checkbox" name="tall-2-2" id="tall-2-2"&gt;
                          &lt;label for="tall-2-2"&gt;Paul Bunyan&lt;/label&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  &lt;input type="checkbox" name="tall-2-2-1" id="tall-2-2-1"&gt;
                                  &lt;label for="tall-2-2-1"&gt;Son&lt;/label&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;input type="checkbox" name="tall-2-2-2" id="tall-2-2-2"&gt;
                                  &lt;label for="tall-2-2-2"&gt;Daughter&lt;/label&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" name="tall-3" id="tall-3"&gt;
                  &lt;label for="tall-3"&gt;Two sandwiches&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="checkbox" name="short" id="short"&gt;
          &lt;label for="short"&gt;Short Things&lt;/label&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" name="short-1" id="short-1"&gt;
                  &lt;label for="short-1"&gt;Smurfs&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" name="short-2" id="short-2"&gt;
                  &lt;label for="short-2"&gt;Mushrooms&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" name="short-3" id="short-3"&gt;
                  &lt;label for="short-3"&gt;One Sandwich&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;hr&gt;
  
  &lt;!-- Non Bootstrap Example --&gt;
  &lt;b&gt;My initial code example - Is Working&lt;/b&gt;
  &lt;p&gt;
  &lt;ul&gt;
      &lt;li&gt;
  
          &lt;input type="checkbox" name="" value="" disabled&gt;&lt;strong&gt;Ford&lt;/strong&gt;
  
          &lt;ul&gt;
              &lt;li&gt;
  
                  &lt;input type="checkbox" name="" value=""&gt;Fiesta&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
  
                  &lt;input type="checkbox" name="" value=""&gt;Focus&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
  
                  &lt;input type="checkbox" name="" value=""&gt;Mondeo&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;input type="checkbox" name="" value="" disabled&gt;&lt;strong&gt;Vauxhall&lt;/strong&gt;
  
  
          &lt;ul&gt;
              &lt;li&gt;
  
                      &lt;input type="checkbox" name="" value=""&gt;Corsa&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
  
                      &lt;input type="checkbox" name="" value=""&gt;Astra&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
  
                      &lt;input type="checkbox" name="" value=""&gt;Vectra&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
              &lt;hr&gt;
  
  &lt;!-- Bootstrap Example --&gt;
  
  &lt;b&gt;Bootstrap based code example - Not Working&lt;/b&gt;
  &lt;p&gt;
  
  &lt;ul&gt;
      &lt;li&gt;
          &lt;label class="checkbox"&gt;
              &lt;input type="checkbox" name="" value="" disabled&gt;&lt;strong&gt;Ford&lt;/strong&gt;
  
          &lt;/label&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="" value=""&gt;Fiesta&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="" value=""&gt;Focus&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="" value=""&gt;Mondeo&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label class="checkbox"&gt;
              &lt;input type="checkbox" name="" value="" disabled&gt;&lt;strong&gt;Vauxhall&lt;/strong&gt;
  
          &lt;/label&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="" value=""&gt;Corsa&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="" value=""&gt;Astra&lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label class="checkbox"&gt;
                      &lt;input type="checkbox" name="" value=""&gt;Vectra&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-javascript prettyprint-override"><code>$(function () {
    // Apparently click is better chan change? Cuz IE?
    $('input[type="checkbox"]').change(function (e) {
        var checked = $(this).prop("checked"),
            container = $(this).parent(),
            siblings = container.siblings();
  
        container.find('input[type="checkbox"]').prop({
            indeterminate: false,
            checked: checked
        });
  
        function checkSiblings(el) {
            var parent = el.parent().parent(),
                all = true;
  
            el.siblings().each(function () {
                return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
            });
  
            if (all &amp;&amp; checked) {
                parent.children('input[type="checkbox"]').prop({
                    indeterminate: false,
                    checked: checked
                });
                checkSiblings(parent);
            } else if (all &amp;&amp; !checked) {
                parent.children('input[type="checkbox"]').prop("checked", checked);
                parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length &gt; 0));
                checkSiblings(parent);
            } else {
                el.parents("li").children('input[type="checkbox"]').prop({
                    indeterminate: true,
                    checked: false
                }); 
            } 
        } 
  
        checkSiblings(container); 
    }); 
  });
  </code></pre>
  
  <p>My understanding is that the code needs to be changed somewhere to use <strong>parents</strong> or <strong>closest</strong>. Can someone who is a much better code please help identify where the change needs to happen to get the Bootstrap version working.</p>