Question

我想在这里实现jquery each function。菜单包含子菜单，如果在检查父菜单时未选中子菜单，则必须停止提交。但是这里的sports和vehicle菜单将彼此submenu视为共同的submenu，如果另一个submenu已经检查过我尝试过{{1} }函数，因此jquery条件将仅应用于自己的子元素，但不起作用。

each

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

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>

通过这种方式，您必须在未正确选中复选框的情况下提交表单。

jQuery如何仅检查自己的子元素

1 个答案: