当数量达到 0 时禁用按钮答案

【问题标题】：Disabling a button when a quantity hits 0当数量达到 0 时禁用按钮
【发布时间】：2017-10-27 18:31:13
【问题描述】：

因此，我创建了此表，其中包含您可以“添加到购物车”的 2 种产品及其各自的数量。现在，我将其设置为每当按下“添加到购物车”按钮时，该产品的数量就会减少。我遇到的一件事是让按钮在数量达到零时禁用。任何帮助将不胜感激，谢谢。

const data = [
{Title: "Beer Heineken 6-pack", Quantity: 5, Price: 6.75, Action: null},
{Title: "Sun-dry Fish 1 lb.", Quantity: 3, Price: 10, Action: null}
];

$(document).ready(function() {
   $("div#preload h2").html();
   let table = $('<table>').addClass('table table-
   striped').appendTo(document.body);
   table.append($('<thead>').append($('<tr>')));
   table.append($('<tbody>'));
   let headerRow = table.find('thead tr');
   Object.keys(data[0]).forEach(function(key) {
    headerRow.append($('<th>').text(key));
})

let tbody = table.find('tbody');

let tableRender = function(){
    data.forEach(function(dataItem, index) {
        let tr = $('<tr>').appendTo(tbody);
        Object.keys(dataItem).forEach(function(key){
            if(dataItem[key] !== null) {
                tr.append($('<td>').text(dataItem[key]));
            }
            else{
                tr.append($('<td>').append($('<button>')
                .addClass('btn btn-secondary').text("Add To Cart")
                .click(function() {
                    dataItem.Quantity = dataItem.Quantity < 1 ? 0 : dataItem.Quantity - 1;
                    tbody.empty();
                    tableRender();



                })));
            }
        })
    })
}

tableRender();
})

【问题讨论】：

为什么在按钮的点击事件中再次使用tableRender();？

标签： javascript jquery html button

【解决方案1】：

由于您要重绘所有表格 HTML，因此您需要在重绘期间根据数量是否为零来设置按钮的“禁用”属性。

tr.append($('<td>').append($('<button>')
  .prop("disabled", dataItem.Quantity === 0)
  .addClass('btn btn-secondary').text("Add To Cart") //...

（不过，重绘完整的表格 HTML 可能会给您带来麻烦；任何附加到表格的用户输入或事件绑定都将在重绘时消失。）

【讨论】：

【解决方案2】：

有一个很好的简单 jquery 示例禁用at this link

它使用 .prop() 方法将所选项目（在本例中为您的按钮）的“禁用”属性设置为 true。

我假设您已经知道如何检查您的数量是否达到零:-)

【讨论】：