Question

限制特定数量的复选框的示例是 here。

var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
  if ($(this).siblings(':checked').length >= limit) {
    this.checked = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-levels-3">
  <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>

，但允许用户从所有复选框中选择任意三个。如何限制用户选择连续三个而不是随机三个复选框？例如，如果用户选择的第一个复选框为级别4，则用户只能选择下两个（5,6）或前两个（3,2）复选框，或前一个（3）和下一个（5）复选框。复选框。

谢谢。

Answer 1

您必须扩展change事件侦听器回调，以检查（在选中其他选项时）这些选中的选项之一是当前更改项的上一个还是下一个。如果是这样，没关系。

此外，当取消选中时，如果它是中间的，则您将无法执行此操作。（否则会产生间隙。）

该花点时间了！

var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
  let $this = $(this);
  
  if (
    !$this.prop('checked') &&
    $this.prevAll('input').first().prop('checked') &&
    $this.nextAll('input').first().prop('checked')
  ) {
    // Don't uncheck if both neighbours are checked (would create a gap)
    $this.prop('checked', true);
  } else if (
    $this.siblings(':checked').length >= limit ||
    (
      $this.siblings(':checked').length > 0 &&
      !$this.prevAll('input').first().prop('checked') &&
      !$this.nextAll('input').first().prop('checked')
    )
  ) {
    // Don't check if limit is reached
    // or
    // none of the neighbours are checked but others are
    $this.prop('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-levels-3">
  <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>

Answer 2

无论您如何将复选框放置在DOM上，此方法都有效。只要它们都具有相同的类。

// listen to the checkbox change state
            $('input[type="checkbox"]').on('change', function() {
                // trck the number of checkboxes that are checked.
                var countCkecked = $('.single-checkbox:checked').length;

                // remove the error message element from the DOM.
                $('.error-message').remove();

                if (countCkecked === 3) {
                    /* 
                    The "inputState" is an array of objects which is a store of the state of the checkboxes. It trackes the checkbox index in the array 
                    that is returned from the class selector and the checked state.
                    */
                    var inputState = $('.single-checkbox').map(function(ii, val) {
                        return {
                            arrIdx: ii,
                            checked: $(val)[0].checked
                        }
                    });

                    // Creates an array of just the checkboxes that are checked.
                    var jumpIdx = inputState.filter(function(ii, item) {
                        return item.checked === true;
                    });

                    /*
                    The only checkbox that is inportant is the one that is in the middle. Being that this functionality only triggers if there
                    have been three chekboxes selected we look at the middle checkbox and determin if the one after and before it is checked.
                    */
                    if (Number(jumpIdx[0].arrIdx) === Number(jumpIdx[1].arrIdx - 1) && Number(jumpIdx[2].arrIdx) === Number(jumpIdx[1].arrIdx + 1)) {
                        // This triggers if the checkboxes that are checked are consecutive. The other checkboxes are disabled.
                        $('.single-checkbox:not(:checked)').attr('disabled', true);
                    } else {
                        // This triggers if the checkboxes that are checked are not consecutive. An error message is displayed and all the checkboxes are enabled.
                        $('.pricing-levels-3').append('<div class="error-message">Selections must be consecutive</div>');
                        $('.pricing-levels-3').on('change', function(e) {
                            console.log(e, 'sdsdsds', $(this), $(this).find('.error-message'));
                            $(this).find('.error-message').fadeOut(5500);
                        });
                        $('.single-checkbox').attr('checked', false);
                    }
                }
            });

复选框选择

2 个答案: