CODEWITHSUNDEEP
jquerycheckboxeach
Dipak
Dipak

Reputation: 939

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

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

Upvotes: 0

Views: 38

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

It's better you implement the check condition which checking the checkbox and make the main checkboxes readonly.

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

This way, you cannot submit the form without checking the boxes correctly.

Upvotes: 1

Related Questions