Jquery, как проверить только собственный дочерний элемент

Question

Я хочу реализовать jquery each function здесь. Меню содержит подменю, если подменю не было проверено, когда проверяется его родительское меню, то его необходимо остановить для отправки. Но здесь sports и vehicle меню рассматривают друг друга submenu как общее submenu, оно не может остановиться, если чье-либо submenu проверило, что я пробовал функцию each, поэтому условие jquery будет применяться только к своему собственному потомку элемент, но он не работает.

$(document).on('submit', '#form', function(e) {
  e.preventDefault();
  if ($("[name='menu[]']:checked").length == 0) {
    alert('Missing menu');
    return false;
  }
  if ($("[name='menu[]']:checked").val() == 2 && $("[name^='submenu']:checked").length == 0) {
    alert('Missing submenu');
    return false;
  }
  if ($("[name='menu[]']:checked").val() == 12 && $("[name^='submenu']:checked").length == 0) {
    alert('Missing submenu');
    return false;
  } else {
    alert('Success');
  }
});

$(document).on('click', '#menu', function() {
  if ($(this).is(':checked')) {
    $(this).parent().find('ul').slideDown('slow');
  } else {
    // these two events
    $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    $(this).parent().find('ul').hide('slow');
  }
});

ul li {
  list-style: none;
  float: left;
}

ul li ul li {
  float: none;
}

.col100 {
  width: 100%;
}

ul li ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <ul>
    <li><input type="checkbox" name="menu[]" value="2" id="menu">Vehicle
      <ul>
        <li><input type="checkbox" name="submenu[2][1]">Bike</li>
        <li><input type="checkbox" name="submenu[2][2]">Car</li>
        <li><input type="checkbox" name="submenu[2][3]">Cycle</li>
      </ul>
    </li>
    <li><input type="checkbox" name="menu[]" value="12" id="menu">Sport
      <ul>
        <li><input type="checkbox" name="submenu[12][1]">Basketball</li>
        <li><input type="checkbox" name="submenu[12][2]">Volleyball</li>
        <li><input type="checkbox" name="submenu[12][3]">Football</li>
      </ul>
    </li>
  </ul>
  <input type="submit" name="submit" value="submit" class="col100">
</form>

Answer 1

Лучше реализовать условие проверки, которое устанавливает флажок, и сделать основные флажки доступными только для чтения.

$(function() {
  // Make the main checkboxes readonly.
  $('[name="menu[]"]').click(false);
  $('[name="menu[]"] + ul input').click(function() {
    $(this).closest("ul").prev("input").prop("checked", ($(this).closest("ul").find("input:checked").length > 0));
  });
  $(document).on('submit', '#form', function(e) {
    e.preventDefault();
    if ($("[name='menu[]']:checked").length == 0) {
      alert('Missing menu');
      return false;
    } else {
      alert('Success');
    }
  });
});

ul li {
  list-style: none;
  float: left;
}

ul li ul li {
  float: none;
}

.col100 {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <ul>
    <li><input type="checkbox" name="menu[]" value="2" />Vehicle
      <ul>
        <li><input type="checkbox" name="submenu[2][1]">Bike</li>
        <li><input type="checkbox" name="submenu[2][2]">Car</li>
        <li><input type="checkbox" name="submenu[2][3]">Cycle</li>
      </ul>
    </li>
    <li><input type="checkbox" name="menu[]" value="12" />Sport
      <ul>
        <li><input type="checkbox" name="submenu[12][1]">Basketball</li>
        <li><input type="checkbox" name="submenu[12][2]">Volleyball</li>
        <li><input type="checkbox" name="submenu[12][3]">Football</li>
      </ul>
    </li>
  </ul>
  <input type="submit" name="submit" value="submit" class="col100">
</form>

Таким образом, вы не можете отправить форму без правильной установки флажков.