设置复选框选择的可变限制

Question

我正在尝试根据先前的选择设置可以设置多少个复选框的可变限制。

在我的代码中，我有一个选项输入，您可以在其中选择您的选择（即templates 和limitTemplate 变量）。然后我有一些复选框输入。假设我选择了 2 张卡的选项。然后我想选择它下面的两个复选框，然后无法选择任何其他卡。

出于某种原因，我的代码显示我的第一次选择已达到限制，无论卡限制选项如何。正如您在我的#template-number（其中显示“从下面选择 x 模板”）中看到的那样，我正在让limitTemplate 工作，至少在那时。

有人看到我做错了吗？

我试图限制限制的代码部分在这里：

 if ($(templateCount >= limitTemplate)) {
          event.preventDefault();
          $('.tp-template-check[type="checkbox"]').not(':checked').prop('disabled', true);
          alert("You reached your limit");
        }

ps - 它看起来像很多 HTML，但它基本上是复选框输入。

Here is a fiddle in case you prefer this method.

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}
  $('#tp-frequency').on('change', function() {
    var templates = $('#tp-frequency option:selected').val();
    $('#template-number').html(templates);

    // Setting limit for TP templates

    $('.tp-template-check').on('change', function() {
      var limitTemplate = templates;
      if (!this.checked || $('.tp-template-check:checked').length <= limitTemplate) {
        $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
        var templateCount = $('.tp-template-check:checked').length;

        if ($(templateCount > 0)) {
          $('#templateCount').html(templateCount + " Template" + (templateCount == 1 ? "" : "s") + " Selected");
        }
        if ($(templateCount >= limitTemplate)) {
          event.preventDefault();
          $('.tp-template-check[type="checkbox"]').not(':checked').prop('disabled', true);
          alert("You reached your limit");
        }
        if (templateCount == limitTemplate) {
          $('#templateCountComplete').fadeBoolToggle($('.tp-template-check:checked').length == limitTemplate).addClass('block');
        } else if (templateCount > limitTemplate) {
          $('.tp-template:checkbox').attr('checked', false);
          $('#templateCountComplete').hide();
        }
      } else {
        $('#templateCountComplete').hide();
      }
    }); //End of .tp-template-check func
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2 class="section-subtitle">Choose the limit</h2>
<p class="small-description margin25">* Some choices result in more/less cards.</p>
<select id="tp-frequency" class="option-input">
  <option value='' disabled selected>Please choose option</option>
  <option value='5'>5 cards</option>
  <option value='3'>3 cards</option>
  <option value='2'>2 cards</option>
</select>
<div id="tp-template-section">
  <!-- Template Section -->
  <h2 class="section-subtitle">Choose <span id="template-number"></span> templates from below.</h2>
  <p id="test2"></p>
  <p id="templateCount"></p>
  <div id="templateCountComplete"><img src="images/checkmark.png" alt="Template Selection Complete" id="templateCountImg"></div>
  <div id="tp-template-wrap">
    <div class="tp-template">
      <div class="product-wrap">
        <label for="tp-winter" class="package-check-toggle">
          <h4 class="tp-template-title">Winter</h4>
          <img src="images/tp-winter.png" class="tp-template-img">
          <img src="images/checkmark-circle.png" class="checkmark-img total-center">
        </label>
        <input type="checkbox" class="tp-template-check" data-template="Winter" data-template-image="<img src='images/tp-winter.png' class='review-img'>" id="tp-winter" value="Winter">
      </div>
    </div>
    <div class="tp-template">
      <div class="product-wrap">
        <label for="tp-spring" class="package-check-toggle">
          <h4 class="tp-template-title">Spring</h4>
          <img src="images/tp-spring.png" class="tp-template-img">
          <img src="images/checkmark-circle.png" class="checkmark-img total-center">
        </label>
        <input type="checkbox" class="tp-template-check" data-template="Spring" data-template-image="<img src='images/tp-spring.png' class='review-img'>" id="tp-spring" value="Spring">
      </div>
    </div>
    <div class="tp-template">
      <div class="product-wrap">
        <label for="tp-summer" class="package-check-toggle">
          <h4 class="tp-template-title">Summer</h4>
          <img src="images/tp-summer.png" class="tp-template-img">
          <img src="images/checkmark-circle.png" class="checkmark-img total-center">
        </label>
        <input type="checkbox" class="tp-template-check" data-template="Summer" data-template-image="<img src='images/tp-summer.png' class='review-img'>" id="tp-summer" value="Summer">
      </div>
    </div>
    <div class="tp-template">
      <div class="product-wrap">
        <label for="tp-fall" class="package-check-toggle">
          <h4 class="tp-template-title">Fall</h4>
          <img src="images/tp-fall.png" class="tp-template-img">
          <img src="images/checkmark-circle.png" class="checkmark-img total-center">
        </label>
        <input type="checkbox" class="tp-template-check" data-template="Fall" data-template-image="<img src='images/tp-fall.png' class='review-img'>" id="tp-fall" value="Fall">
      </div>
    </div>
    <div class="tp-template">
      <div class="product-wrap">
        <label for="tp-newYears" class="package-check-toggle">
          <h4 class="tp-template-title">New Years</h4>
          <img src="images/tp-newYears.png" class="tp-template-img">
          <img src="images/checkmark-circle.png" class="checkmark-img total-center">
        </label>
        <input type="checkbox" class="tp-template-check" data-template="New Years" data-template-image="<img src='images/tp-newYears.png' class='review-img'>" id="tp-newYears" value="New Years">
      </div>
    </div>
    <div class="tp-template">
      <div class="product-wrap">
        <label for="tp-independence" class="package-check-toggle">
          <h4 class="tp-template-title">Independence Day</h4>
          <img src="images/tp-independence.png" class="tp-template-img">
          <img src="images/checkmark-circle.png" class="checkmark-img total-center">
        </label>
        <input type="checkbox" class="tp-template-check" data-template="Independence Day" data-template-image="<img src='images/tp-independence.png' class='review-img'>" id="tp-independence" value="Independence Day">
      </div>
    </div>
    <div class="tp-template">
      <div class="product-wrap">
        <label for="tp-thanksgiving" class="package-check-toggle">
          <h4 class="tp-template-title">Thanksgiving</h4>
          <img src="images/tp-thanksgiving.png" class="tp-template-img">
          <img src="images/checkmark-circle.png" class="checkmark-img total-center">
        </label>
        <input type="checkbox" class="tp-template-check" data-template="Thanksgiving" data-template-image="<img src='images/tp-thanksgiving.png' class='review-img'>" id="tp-thanksgiving" value="Thanksgiving">
      </div>
    </div>

Answer 1

您的某些 if 语句条件似乎不正确。您将条件封装为 jQuery 选择器。

改变这个：

if ($(templateCount > 0)) {
      ...
}

if ($(templateCount >= limitTemplate)) {
      ...
}

到这里：

if (templateCount > 0) {
      ...
}

if (templateCount >= limitTemplate) {
      ...
}