Deaktivieren einer Schaltfläche, wenn eine Menge 0 erreicht 0

Question

Also habe ich diese Tabelle der 2 Produkte erstellt, die Sie mit ihren jeweiligen Mengen "in Ihren Warenkorb" hinzufügen können. Jetzt habe ich es eingerichtet, wenn die Taste "In den Warenkorb" gedrückt wird, wird die Menge dieses Produkts dekrementiert. Eine Sache, mit der ich Probleme habe, ist, dass die Schaltfläche deaktiviert wird, wenn die Menge Null erreicht. Jede Hilfe wäre dankbar, danke.

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

Answer 1

Da Sie alle Tabelle HTML sind neu gezeichnet, müssen Sie die während der „disabled“ Attribut der Schaltfläche gesetzt neu zeichnen, basierend darauf, ob die Menge Null ist oder nicht.

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

(die vollständige Tabelle HTML Redrawing können Sie Probleme auf dem Weg führen, obwohl, alle Benutzereingaben oder Ereignisbindungen am Tisch befestigt werden weggeblasen, wenn sie neu gezeichnet ist.)

Answer 2

Es ist ein schönes, einfaches jquery Beispiel at this link deaktivieren

Es nutzt die .prop() -Methode, die „disabled“ Eigenschaft des ausgewählten Elements einzustellen (Ihre Schaltfläche, in diesem Fall) zu wahren.

Ich nehme an, Sie wissen bereits, wie Sie für Ihre Quantität überprüfen Null erreicht :-)