在复选框选择上设置变量限制

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) { 
     ... 
}