Jquery how to check own child element only

I want to implement jquery each function in here. Menu contains submenu, if submenu has not been checked when it's parent menu is being checked, then it have to be stopped to submit. But here sports and vehicle menu consider each other submenu as common submenu, It cann't stop if another's submenu has checked I tried each function, so jquery condition would be applied only own child element, but it doesn't work.

$(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');
  }
});

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>