Заблокировать элемент button JQuery
Всем привет. По клику на кнопку все остальные кнопки в таблице button[name="Product"] должны быть заблокированы.
$(document).ready(function () {
$('#changeBack').click(function () {
$.ajax({
type: 'GET',
url: '/user/GetChange',
success: function (result) {
var count = 0;
//var s = 'Id: ' + result.id;
var s = 'Спасибо за покупкку';
s += '<table class="table">' + '<tr><td>Ваша сдача: <td><tr>';
$.each(result.$values, function (index, value) {
s += '<tr style="border-bottom: 1px solid #000;"><td> Количество монет: ' + value.quantity + ' монет по ' + value.id + '<td><tr>';
count++;
});
s + '</table>';
$('#result3').html(s);
var summ = $('#total').val(0);
//test
document.querySelectorAll('.table td.price')
.forEach(td => {
const price = parseFloat(td.dataset.price);
const bt = td.closest('tr').querySelector('button[name="Product"]');
bt.disabled = false;
});
$('.table td').each(function() {
console.log($(this).html());
});
//test
console.log(summ);
}
});
});
});
Вот Мой Js. Кнопки создаются так:
@foreach (var item in Model)
{
pirce = item.Quantity > 0 ? "price" : "priceOutOfStock";
<tr id=pirceTr>
<input type="hidden" name="id" value=@item.Id />
@*<td><input asp-for="@item.Name" value="@item.Id" name="Product" type="radio" disabled="true"></td>*@
<br />
<td>@item.Name</td>
<td class=@pirce data-price=@item.Price name="price" id="price" value=@item.Price>@item.Price</td>
<td style="width: 10%">
<button name="Product" type="submit" value="@item.Id" disabled="true"><img class="center" srcset="~/images/@item.TitleImagePath" src="@Url.Action("Purchase", "User", new {item.Id})" style="width: 128px; height: 96px; vertical-align: bottom"></button>
</td>
<td>@item.Description</td>
<td id="quantity" class="quantity" data-quantity=@item.Quantity name="quantity">@item.Quantity</td>
</tr>
}
</table>
|
const bts = document.querySelectorAll('button[name="Product"]')
bts.forEach ( bt => {
bt.addEventLisenter('click', ev => {
bts.forEach (b => b.disabled = b !== bt)
})
})
|
Цитата:
Uncaught TypeError: bt.addEventLisenter is not a function
<div class="col-md-4 col-md-offset-4">
<fieldset>
<legend>Сдача</legend>
<form asp-action="GetChange" asp-controller="User"
method="post" enctype="multipart/form-data">
<input class="btn btn-info" type="button" value="Сдача" id="changeBack" />
<br />
<span id="result3"></span>
</form>
</fieldset>
</div>
Вот кнопка. По ее нажатию Я вызываю ajax
$(document).ready(function () {
$('#changeBack').click(function () {
$.ajax({
type: 'GET',
url: '/user/GetChange',
success: function (result) {
var count = 0;
//var s = 'Id: ' + result.id;
var s = 'Спасибо за покупкку';
s += '<table class="table">' + '<tr><td>Ваша сдача: <td><tr>';
$.each(result.$values, function (index, value) {
s += '<tr style="border-bottom: 1px solid #000;"><td> Количество монет: ' + value.quantity + ' монет по ' + value.id + '<td><tr>';
count++;
});
s + '</table>';
$('#result3').html(s);
var summ = $('#total').val(0);
//test
const bts = document.querySelectorAll('button[name="Product"]');
bts.forEach ( bt => {
bt.addEventLisenter('click', ev => {
bts.forEach (b => b.disabled = b !== bt);
});
});
//test
console.log(summ);
}
});
});
});
Обнуляю сумму, и в итоге человек забрал сдачу и осталось на счете 0. Все
<td style="width: 10%">
<button name="Product" type="submit" value="@item.Id" disabled="true"><img class="center" srcset="~/images/@item.TitleImagePath" src="@Url.Action("Purchase", "User", new {item.Id})" style="width: 128px; height: 96px; vertical-align: bottom"></button>
</td>
Должны быть снова заблокированы |
Ну очепятался.
Могли бы и сами поправить Только я сразу не понял. Думал, что на нажатие на одну из кнопок name="Product, остальные должны заблокироваться. Тогда еще проще
document.querySelectorAll('button[name="Product"]').forEach (b => b.disabled = true)
|
Цитата:
|
| Часовой пояс GMT +3, время: 23:12. |