Question

我创建了一个选择输入，您可以从三个限制选项（5,3或2）中进行选择。然后，我在下面有5个可能的输入。下面的选项，即假期是复选框输入。限制代码I禁用在达到限制后进行的选择，即：如果选择3，则您将无法超过3个选择。

*我的主要问题是看起来更改功能似乎没有影响限制计数。因此，如果从限制选择输入中选择3然后选择三个选项，则决定要增加限制并选择3到5的选择输入，它不允许用户选择两个附加选项。

*然后，如果您从选择输入中选择3，则选择三个选项后，如果取消选中复选框，则不允许您选择其他选项。它只允许您选择您单击的相同选项。

您知道，当选择一个选项时，会出现alt图像。为了能够单击选项，需要首先选择选择输入。

有谁知道为什么会出现这些问题？

＆＃13;

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 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();
      }
    });
  });

＆＃13;

.product-check, .tp-template-check, #templateCountComplete, .checkmark-img {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2 class="section-subtitle">Choose the limit</h2>
<select id="tp-frequency" class="option-input">
  <option value='' disabled selected>Please choose option</option>
  <option value='5'>5</option>
  <option value='3'>3</option>
  <option value='2'>2</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">Templates Reached Limit</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/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/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/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/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/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>

＆＃13;

在变更事件上监听复选框的限制

0 个答案: