JSFiddle - React, Tailwind, and code Playground

HTML

<b>Bootstrap based code</b>
    <p>
    <ul>
        <li>
            <label class="checkbox">
                <input type="checkbox" name="" value="" disabled><strong>Ford</strong>
            </label>
            <ul>
                <li>
                    <label class="checkbox">
                        <input type="checkbox" name="" value="">Fiesta</label>
                </li>
                <li>
                    <label class="checkbox">
                        <input type="checkbox" name="" value="">Focus</label>
                </li>
                <li>
                    <label class="checkbox">
                        <input type="checkbox" name="" value="">Mondeo</label>
                </li>
            </ul>
        </li>
        <li>
            <label class="checkbox">
                <input type="checkbox" name="" value="" disabled><strong>Vauxhall</strong>
            </label>
            <ul>
                <li>
                    <label class="checkbox">
                        <input type="checkbox" name="" value="">Corsa</label>
                </li>
                <li>
                    <label class="checkbox">
                        <input type="checkbox" name="" value="">Astra</label>
                </li>
                <li>
                    <label class="checkbox">
                        <input type="checkbox" name="" value="">Vectra</label>
                </li>
            </ul>
        </li>
    </ul>

JavaScript

$(function () {
      $('input[type="checkbox"]').change(function (e) {
          var checked = $(this).prop("checked"),
              container = $(this).closest("li"),
              siblings = container.siblings();
          container.find('input[type="checkbox"]').prop({
              indeterminate: false,
              checked: checked
          });

          function checkSiblings(el) {
              var parent = el.parent().parent(),
                  all = true,
                  parentcheck=parent.children("label");
              el.siblings().each(function () {
                  return all = ($(this).find('input[type="checkbox"]').prop("checked") === checked);
              });
              if (all && checked) {
                  parentcheck.children('input[type="checkbox"]').prop({
                      indeterminate: false,
                      checked: checked
                  });
                  checkSiblings(parent);
              } else if (all && !checked) {
                  parentcheck.children('input[type="checkbox"]').prop("checked", checked);
                  parentcheck.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
                  checkSiblings(parent);
              } else {
                 parentcheck.children('input[type="checkbox"]').prop({
                      indeterminate: true,
                      checked: false
                  });
              }
          }
          checkSiblings(container);
      });
  });