Проверка внесенной суммы на доступность к покупке
 

Всем привет друзья.
Пользователь вносит сумму используя для этого ненужные кнопки. Если внесенная сумма меньше цены покупки, запретить выбор продукта. Если внесенной суммы достаточно то разрешить к покупке доступные.

View

<div class="container">
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

        @foreach (var entity in Model.Coins)
        {
            <div class="btn">
                <button class="btn btn-info" value=@Convert.ToInt32(@entity.Cost) disabled=@entity.IsBlocked onclick="myFunction(@Convert.ToInt32(@entity.Cost))">@entity.Cost</button>
            </div>
        }
        <form asp-action="Purchase" asp-controller="User"
              method="post" enctype="multipart/form-data">
            <!--Products-->
            @await Html.PartialAsync("_Products", @Model.ProductViewModels)

            <input type="hidden" id="coin1" name="coin1"/>
            <input type="hidden" id="coin2" name="coin2"/>
            <input type="hidden" id="coin5" name="coin5"/>
            <input type="hidden" id="coin10" name="coin10"/>

            <label>
                Сумма
                <input name="total" type="text" class="total" />
            </label>
            <input class="button" type="submit" value="Оплатить" />
        </form>
        <div id="outputField"></div>
    </div>
</div>

partial View:

<div class="container">
    <div class="row">
        <h3>Продукты</h3>
        @if (Model.Any())
        {
            <div class="formR">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Выбранный</th>
                            <th>Наименование</th>
                            <th>Цена</th>
                            <th>Картинка</th>
                            <th>Описание</th>
                            <th>Наличие</th>
                        </tr>
                    </thead>
                    @foreach (var item in Model)
                    {
                        i++;
                        <tr>
                            <input type="hidden" name="id" value=@item.Id />
                            <td><input asp-for="@item.Name" value="@item.Id" name="Product" type="radio"></td>
                            <br />
                            <td>@item.Name</td>
                            <td>@item.Price</td>
                            <td style="width: 10%">
                                @*//<input type="submit" class="imgb" src="~/images/@item.TitleImagePath" width="100" height="111" />*@
                                @*<p><input type="image" src="~/images/@item.TitleImagePath" alt="ОК"></p>*@
                                @*<img class="img-block" src="~/images/@item.TitleImagePath" width="100" height="111"/>*@
                                <button name="clickonbutton" type="submit" value="@item.Name"><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>
                            
                        </tr>
                    }
                </table>
            </div>
        }
    </div>
</div>

Можно ли как нибудь сделать так:
Вначале внесенная сумма 0
Все напитки заблокированы.
Пользователь жмет на кнопки на панели чтобы внести сумму, сумма складывается.
Пользователь внес 30, напитки все еще заблокированы.
Если пользователь добавляет 35 становятся доступны напитки по цене 35 и так далее.
Радио бутон нужен для передачи в контроллер, если отмечен передаем. Так и понимаем какой элемент был выбран

Да, так сделать можно. :yes:

Как Я уже перепробовал кучу всего, не могу и все. Не делается так как Я хочу. Или знаний не хватает просто или опыта. Не пойму:cray:

BorisJe, когда клацнули на кнопку - ты меняешь сумму.
После этого нужно "пройтись" по радиокнопкам и сделать активными те, что еще не активны и их цена меньше твоей суммы.

Скорее всего надо блокировать вообще все строчку ну или сумму подсвечивать красным и блокировать радио кнопку.
По клику на кнопку картинку идет переход на контроллер ну а там вся логика.

<button name="clickonbutton" type="submit" value="@item.Name"><img class="center" srcset="~/images/@item.TitleImagePath" src="@Url.Action("Purchase", "User", new {item.Id })" style="width: 128px; height: 96px;vertical-align: bottom"></button>

При клике на нее радиобутон должен становиться истинной.
Но в теории Я понимаю что требуется сделать, как Я вообще понять не могу.
Если можешь подсказать подскажи пожалуйста, Я буду очень признателен и буду знать как делать

Кто меняет хтмл?
Его присылает контроллер?

У Меня платформа Asp Net core.
HTML никто не формирует он есть уже его нужно отредактировать :help: в зависимости от внесенных данных на форму пользователем. Данные в хмтл попадают из базы данных. Вся разметка написана.

Каждый напиток имеет свою стоимость.
Если внесенная сумма меньше стоимости напитка, пользователь не может выбирать этот напиток. Нужно держать его заблокированным :stop:.
Если внесенная сумма достаточна для оплаты, пользователь выбирает напиток кликая на картинку. :yes:

А дальше Я передаю действие контроллеру:thanks: . Ну и тут уже уменьшая количество напитков -1 , вношу изменения по монетам и выдаю сдачу :cray: .

Значит можно использовать тот алгоритм (на JS) что я описал выше...

Тогда верно будет так слушать изменения input

$('#total').on('input',function(e){
        alert('Changed!');
    });;

$(document).ready(function () {
        const res = document.querySelector('.result');
        const text = document.querySelector('#total');
        text.addEventListener('input', e => res.innerHTML = e.target.value);
    });

Если вношу изменения вручную все ок, Я могу слушать инпут и вижу изменения. Если Изменения делаю с кнопки то ноль на массу