Question

我正在尝试仅在购物车上的商品数量发生变化时才显示按钮（就像在ebay购物车上一样）。我做到了，但它没有按预期工作link，有人知道一种更简单或不同的方式吗？

Answer 1

试试这个（jquery）：

<input type="number" name="quantity" min="0" max="99">
<button id="add" style="display: none;">Add Item</button>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
$('input[name="quantity"]').on('change keyup', function(){
    var qty = $(this).val();
  if ($.isNumeric(qty) && qty > 0) {
        $('#add').show();
    } else {
        $('#add').hide();
    }
});
</script>

脚本是不言自明的。如果您需要进一步解释，请发表评论。

小提琴：https://jsfiddle.net/qkLfftoo/7/

注意：此脚本旨在提供更好的用户体验，而不是用于验证。请使用后端验证以确保输入不是负整数。

对于多个按钮：

<div class="item">
  <input type="number" name="quantity" min="0" max="99">
  <button class="add" data-id="1" style="display: none;">Add Item</button>
</div>
<div class="item">
  <input type="number" name="quantity" min="0" max="99">
  <button class="add" data-id="2" style="display: none;">Add Item</button>
</div>
<div class="item">
  <input type="number" name="quantity" min="0" max="99">
  <button class="add" data-id="3" style="display: none;">Add Item</button>
</div>
$('input[name="quantity"]').on('change keyup', function(){
    var item = $(this).closest('.item');
    var qty = $(this).val();
  if ($.isNumeric(qty) && qty > 0) {
        item.find('.add').show();
    } else {
        item.find('.add').hide();
    }
});

$('.add').on('click', function(){
    var product_id = $(this).data('id');
  var item = $(this).closest('.item');
  var qty = item.find('input[name="quantity"]').val();
  alert('product_id: ' + product_id + ' * ' + qty + ' will be added');
});

小提琴：https://jsfiddle.net/qkLfftoo/27/

Answer 2

由于它是前端开发部分，您可以使用jQuery。使用jQuery禁用按钮有很多优点，因为它允许您根据用户交互启用和禁用按钮。您可以轻松地将此代码与其他jQuery实现一起使用。

您可以查看以下教程以获取更多参考。

https://blog.revillweb.com/jquery-disable-button-disabling-and-enabling-buttons-with-jquery-5e3ffe669ece

https://www.formget.com/enable-disable-button-jquery/

如果文本更改，则使按钮可见

2 个答案: