Ваша проблема заключается в следующем определении кнопки:
<button class="btn btn-default pull-left" onclick="disableText(Quantity);" id="btn-addToCart">Add To Cart</button>
Цикл foreach
генерирует повторяющиеся значения атрибута id
для всех кнопок, что создает недопустимый HTML и вызывает нежелательное поведение.Поскольку ваша таблица также содержит тег <input>
, вы должны использовать цикл for
вместо foreach
и добавить к кнопке отдельное имя класса, например, buttonadd
:
<!-- assumed that @model List<Product> is used -->
<table id ="productList" class="table table-dark">
<tr>
<th>Product ID</th>
<th>Title</th>
<th>Description</th>
<th>Quantity</th>
<th>Add to cart</th>
</tr>
@for (int i = 0; i < Model.Count; i++)
{
<tr class="active">
<td>@Model[i].Id</td>
<td>@Model[i].Title</td>
<td>@Model[i].Description</td>
<td>@Html.TextBox("Quantity", "0", new { @class = "form-control" })</td>
<td><button type="button" class="btn btn-default pull-left buttonadd">Add To Cart</button></td>
</tr>
}
</table>
Тогда вы можете сослаться на buttonadd
класс в качестве селектора для определения, в какой строке содержится кнопка, и установка <input>
состояния на readonly
(не disabled
, поскольку вы хотите отправлять количественные значения при отправке формы; все входные данные с атрибутом disabled
не включеныво время отправки), как в примере ниже:
$(document).on('click', '#productList .buttonadd', function () {
var row = $(this).closest('tr');
// find quantity text box in the same row as clicked button
var qty = row.find('input');
// set quantity value and prevent user input
qty.val(parseInt(qty.val()) + 1);
qty.attr('readonly', 'readonly');
});
Примечание: Если вы хотите использовать строго типизированный помощник, используйте @Html.TextBoxFor
:
@Html.TextBoxFor(m => m[i].Quantity, new { @class = "form-control" })
Liveпример: .NET Fiddle