如果内容低于1，Jquery将禁用单击元素

Question

我有下面的div，当单击qc-less或qc-more时，它会减少/增加adjustable-count跨度中的数量。

<div class="quantity-counter current-sub">
  <span class="qc-label">Qty</span>
  <span class="qc-less">–</span>
  <span class="qc-count adjustable-count">1</span>
  <span class="qc-more">+</span>
</div>

当我单击qc-less时，我不希望数字低于1。我如何禁用对qc-less的单击以阻止它转到0？并在1以上再次启用它。

这是我试过的，但还是会变成零：

if ($('.adjustable-count:contains("1")').length > 0) {
  $(this).parent().find('.qc-less').prop('disabled', true);
}

Answer 1

当数量为1时，可以向span标记中添加一些类，并在其增加时将其删除。在下面，我合并了两个事件处理程序，并使用.addClass和removeClass从qc-less标记中添加/删除类。

演示代码：

​

$(".qc-less,.qc-more").click(function() {
  var selector = $(this).closest('.quantity-counter')
  //check if the span click is qc_more 
  $(this).hasClass("qc-more") ? $(this).prev().text(parseInt($(this).prev().text()) + 1) : $(this).next().text(parseInt($(this).next().text()) - 1)
  var text = selector.find('.adjustable-count').text() //get upadted value
  //add/remove disable class
  parseInt(text) <= 1 ? selector.find('.qc-less').addClass("disabled") : selector.find('.qc-less').removeClass("disabled");
})

.qc-less,
.qc-more {
  background: blue
}

.disabled {
  pointer-events: none;
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity-counter current-sub">
  <span class="qc-label">Qty</span>
  <span class="qc-less disabled">–</span>
  <span class="qc-count adjustable-count">1</span>
  <span class="qc-more">+</span>
</div>

​

Answer 2

请提供您的工作的minimal reproducible example。

这是一个可行的解决方案。由于您没有共享代码，所以我已经完成了值的所有incr/decr操作。

​

$('.qc-less').click(function() {
  var value = parseInt($(this).parents('.quantity-counter').find('.qc-count').text());
  value--;
  $(this).parents('.quantity-counter').find('.qc-count').text(value);
  $(this).prop('disabled', value <= 1);
});

$('.qc-more').click(function() {
  var value = parseInt($(this).parents('.quantity-counter').find('.qc-count').text());
  value++;
  $(this).parents('.quantity-counter').find('.qc-count').text(value);
  $(this).parents('.quantity-counter').find('.qc-less').prop('disabled', value <= 1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity-counter current-sub">
  <span class="qc-label">Qty</span>
  <button class="qc-less" disabled>–</button>
  <span class="qc-count adjustable-count">1</span>
  <button class="qc-more">+</button>
</div>

​