Список чекбоксов по клику на главный чекбокс

[рони]

Хочу сделать элементы неактивными, не срабатывает

а можно узнать что делает код?

[Beactive]

находит input, если чекбокс отмечен больше чем 2 раза, то остальные становятся неактивыми.

[Beactive]

Я так понимаю, неправильно образаюсь к классу, или даже не к тому, вокруг элемента input есть label с классом, обращаюсь к нему, и тоже не работает, класс children окутывает их всех, но и с ним не работает.

var f = document.querySelectorAll('.selectit');
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; 
    }
}

Пример с children
https://jsfiddle.net/Pimpleks/2u2frzjj/4/

[Beactive]

Как проверить где ошибка ?

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

[рони]

Beactive,
вам бы чётко сформулировать задачу и почему нельзя без скриптов то обойтись? пока, что вы там кошдеварите, одному вам известно.
как говорит RTFM локализуйте задачу, куча калиток, а вы куда-то в стену долбитесь.

[Beactive]

Beactive,
вам бы чётко сформулировать задачу и почему нельзя без скриптов то обойтись? пока, что вы там кошдеварите, одному вам известно.
как говорит RTFM локализуйте задачу, куча калиток, а вы куда-то в стену долбитесь.

Я не знаю как реализовать без jquery, да и на нем как тоже не выходит.
Есть главный селектор, если он выбран то показываются остальные, благодаря Вам это реализовано, далее из остальных нужно выбрать только одно. куда еще то локализовать.

https://jsfiddle.net/Pimpleks/x1e7t4tb/2/

[Dilettante_Pro]

Beactive,
var f = document.querySelectorAll возвращает массив, а вы работаете с f, как с простой переменной

[рони]

Beactive,
так измените type="checkbox" на type="radio" и ненужен будет скрипт

[рони]

Beactive,

<style type="text/css">
   .popular-category :checked ~ ul {
  display: block;
}

.popular-category ul {
  display: none;
}

  </style>
<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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-181" class=""> 33</label>
    </li>

    <li id="vehicle_models-182" class="">
      <label class="selectit">
        <input value="182" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-182" class=""> 75</label>
    </li>

    <li id="vehicle_models-183" class="">
      <label class="selectit">
        <input value="183" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-183" class=""> 90</label>
    </li>

    <li id="vehicle_models-184" class="">
      <label class="selectit">
        <input value="184" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-184" class=""> Alfasud</label>
    </li>

    <li id="vehicle_models-185" class="">
      <label class="selectit">
        <input value="185" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-185" class=""> Alfetta</label>
    </li>

    <li id="vehicle_models-186" class="">
      <label class="selectit">
        <input value="186" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-186" class=""> Arna</label>
    </li>

    <li id="vehicle_models-187" class="">
      <label class="selectit">
        <input value="187" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-187" class=""> Brera</label>
    </li>

    <li id="vehicle_models-188" class="">
      <label class="selectit">
        <input value="188" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-188" class=""> GT</label>
    </li>

    <li id="vehicle_models-189" class="">
      <label class="selectit">
        <input value="189" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-189" class=""> GTV</label>
    </li>

    <li id="vehicle_models-190" class="">
      <label class="selectit">
        <input value="190" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-190" class=""> Guilietta</label>
    </li>

    <li id="vehicle_models-191" class="">
      <label class="selectit">
        <input value="191" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-191" class=""> MiTo</label>
    </li>

    <li id="vehicle_models-192" class="">
      <label class="selectit">
        <input value="192" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-192" class=""> Montreal</label>
    </li>

    <li id="vehicle_models-193" class="">
      <label class="selectit">
        <input value="193" type="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-193" class=""> Spider</label>
    </li>
  </ul>
</li>

[Beactive]

Спасибо за совет по изменению на radio, я это понял, но нет возможности изменить код, это функция в движке WP и если изменить то изменится и в li. Поэтому пошел вторым путем - создать скрипт обработчик.

Beactive,
var f = document.querySelectorAll возвращает массив, а вы работаете с f, как с простой переменной

var f = document.forms.Form;

Возвращает массив ? обращается именно к этой форме. Каким способом обратиться именно к элементам формы? все они содержатся в ul class="children" .