Есть ли альтернатива функции jQuery, которая ограничивает выбор типа флажка?

Question

Я написал функцию jQuery для ограничения выбора флажка не более чем на 4 элемента, проблема в том, что он работает только с вводом тега сам по себе!но когда я помещаю этот тег внутрь или внутри таблицы for, он не работает!

Я попытался удалить тег, чтобы метод jQuery работал без проблем, но при реализации мне нужен этот тег, чтобыпоказать мои элементы в таблице.

Это мой HTML-код:

<c:forEach var="tempVehicles" items="${vehicleList}">
     <tr>
         <c:choose>
              <c:when test="${tempVehicles.vehicleType eq vehicleType}">
                    <td>${tempVehicles.registration}  </td>
                    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}"/></td>
              </c:when>
          </c:choose>
     </tr>
</c:forEach>

и мой код JQuery:

$('input[type=checkbox]').on('change', function() {

    var limit = 4;

    if($(this).siblings(':checked').length >= limit) {

        this.checked = false;
    }
});

С этим кодом я могу выбрать большечем 4 элемента «метод jQuery не работает», но когда я удаляю тег <td> из входных данных, метод фактически работает.

Answer 1

Поскольку ваши входные данные не являются братьями и сестрами, измените селектор для проверки количества выбранных, как показано в следующем коде

$('input[type=checkbox]').on('change', function() {

    var limit = 4;

    if($('.single-checkbox:checked').length >= limit) {

        this.checked = false;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table><tr>
  <td><input class="single-checkbox" type="checkbox" value="1"/></td>
  <td><input class="single-checkbox" type="checkbox" value="2"/></td>
  <td><input class="single-checkbox" type="checkbox" value="3"/></td>
  <td><input class="single-checkbox" type="checkbox" value="4"/></td>
  <td><input class="single-checkbox" type="checkbox" value="5"/></td>
  <td><input class="single-checkbox" type="checkbox" value="6"/></td>
  <td><input class="single-checkbox" type="checkbox" value="7"/></td>

Answer 2

Похоже, что входные данные являются дочерними элементами td s - они не являются братьями и сестрами, поэтому .siblings не собирается выбирать правильные элементы.

Если все они имеют одинаковый классsingle-checkbox, затем поместите .single-checkbox в коллекцию jQuery и в обратном вызове проверьте, превышает ли длина этой коллекции, отфильтрованная по :checked, limit:

const $singleCheckbox = $('input.single-checkbox');
$singleCheckbox.on('change', function(e) {
  var limit = 4;
  if ($singleCheckbox.filter(':checked').length > limit) {
    this.checked = false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
  </tr>
</table>

Answer 3

Вы можете наложить контрольный лимит, подойдя к родителю и затем запросив его у потомка.

(($) => {
  $.fn.checkLimit = function(limit) {
    this.on('change', function(e) {
      let $parent = $(this).parent();
      let $target = $parent.prop('tagName') === 'LABEL' ? $parent.parent() : $parent;
      if ($target.find(':checked').length > limit) {
        this.checked = false;
      }
    });
  }
})(jQuery);

$('input[name="vIds[]"]').checkLimit(4);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Mark-up via: https://www.dyn-web.com/tutorials/forms/checkbox/same-name-group.php -->
<form action="#" method="post" class="demoForm" id="demoForm">
  <fieldset>
    <legend>Demo: Checkboxes Sharing Same Name</legend>
    <p>Check the types of sports or fitness activities you engage in on a regular basis.</p>
    <p>
      <label><input type="checkbox" name="vIds[]" value="cycling" /> cycling</label>
      <label><input type="checkbox" name="vIds[]" value="running" /> running</label>
      <label><input type="checkbox" name="vIds[]" value="visit gym" /> visit gym</label>
      <label><input type="checkbox" name="vIds[]" value="swimming" /> swimming</label>
      <label><input type="checkbox" name="vIds[]" value="team sports" /> team sport(s)</label>
      <label><input type="checkbox" name="vIds[]" value="other" /> other</label>
    </p>
  </fieldset>
</form>