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="">
     ...

CSS

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

.popular-category ul {
  display: none;
}

JavaScript

var f = document.querySelectorAll('#vehicle_models-" + val');
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;
    }
}