JSFiddle - React, Tailwind, and code Playground

by Pimpleks

HTML

<li id="vehicle_models-29" class="popular-category"><input value="29" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-29" class=""><label for="in-vehicle_models-29" class="selectit">Alfa Romeo</label><ul class="children" >

<li id="vehicle_models-173" class=""><label class="selectit"><input value="173" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-173" class=""> 145</label></li>

<li id="vehicle_models-174" class=""><label class="selectit"><input value="174" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-174" class=""> 146</label></li>

<li id="vehicle_models-175" class=""><label class="selectit"><input value="175" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-175" class=""> 147</label></li>

<li id="vehicle_models-176" class=""><label class="selectit"><input value="176" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-176" class=""> 155</label></li>

<li id="vehicle_models-177" class=""><label class="selectit"><input value="177" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-177" class=""> 156</label></li>

<li id="vehicle_models-178" class=""><label class="selectit"><input value="178" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-178" class=""> 159</label></li>

<li id="vehicle_models-179" class=""><label class="selectit"><input value="179" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-179" class=""> 164</label></li>

<li id="vehicle_models-180" class=""><label class="selectit"><input value="180" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-180" class=""> 166</label></li>

<li id="vehicle_models-181" class=""><label class="selectit"><input value="181" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-181" class=""> 33</label></li>

<li id="vehicle_models-182" class=""><label class="selectit"><input...

CSS

.popular-category :checked ~ ul {
       display: block;
     }
     .popular-category  ul {
       display: none;
     }

JavaScript

var f = document.querySelectorAll('.children');
f.onchange = function() {
  var n = f.querySelectorAll('[type="checkbox"]'),
      l = f.querySelectorAll('[type="checkbox"]:checked');
  for(var j=0; j<n.length; j++)
    if (l.length >= 1) { 
      n[j].disabled = true; 
      for(var i=0; i<l.length; i++)
        l[i].disabled = false; 
    } else {
      n[j].disabled = false; 
    }
}