Setting a variable limit on checkbox selection

I am attempting to set a variable limit on how many checkboxes can be set, based on a previous selection.

In my code I have an option input, where you select your choice (which is the templates and limitTemplate variables). Then I have some checkbox inputs. Let's say I chose my the option for 2 cards. Then I want to choose two checkboxes below it and then not be able to choose any additional cards.

For some reason my code is saying I am reaching the limit on my first selection, regardless of the card limit option. As you can see in my #template-number (where is says "Choose x templates from below") that I am getting the limitTemplate to work, at least at that point.

Does anyone see what I am doing wrong?

The part of the code where I am trying to restrict the limit is here:

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

ps - it looks like a lot of HTML, but it is basically checkbox inputs.

Here is a fiddle in case you prefer this method.

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}

function tpTemplates() {

  $('#tp-frequency').on('change', function() {
    var templates = $('#tp-frequency option:selected').val();
    $('#template-number').html(templates);
    $('#tp-template-section').show();
    if ($('#tp-frequency option:selected')) {
      $('html, body').animate({
        scrollTop: $('#tp-template-section').offset().top - 10
      }, 800);
    }

    // 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();
          $('#test2').toggle().html('It worked');
        }
      } else {
        $('#templateCountComplete').hide();
      }
    }); //End of .tp-template-check func
  });
};
tpTemplates();

<script src="http://ift.tt/1qRgvOJ"></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>