Я вот к какому варианту ТСа склонял...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.off {
color: red;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
const t = document.querySelector('#total')
document.querySelector('.btn').addEventListener('click', e => {
const o = e.target
if (o.tagName !== 'BUTTON') return
const val = +t.value + +o.value
t.value = val
document.querySelectorAll('.table input').forEach(_ => {
const r = _.parentNode.parentNode
const p = +_.dataset.price
if (val < p) {
_.disabled = true
if (!r.classList.contains('off')) r.classList.add('off')
} else {
_.disabled = false
if (r.classList.contains('off')) r.classList.remove('off')
}
})
})
})
</script>
</head>
<body>
<div class="container">
<h1>Welcome</h1>
<div class="btn">
<div>
<button class="btn btn-info" value="1">1,00</button>
</div>
<div>
<button class="btn btn-info" value="2">2,00</button>
</div>
<div>
<button class="btn btn-info" value="5">5,00</button>
</div>
<div>
<button class="btn btn-info" value="10">10,00</button>
</div>
</div>
<form method="post" enctype="multipart/form-data" action="/User/Purchase" novalidate="novalidate">
<h3>Продукты</h3>
<table class="table">
<thead>
<tr>
<th>Выбранный</th>
<th>Наименование</th>
<th>Цена</th>
<th>Действие</th>
</tr>
</thead>
<tbody>
<tr class='off'>
<td><input value="1" data-price='35.00' name="Product" type="radio" disabled /></td>
<td>Чай</td>
<td id="price">35,00</td>
<td>
<button>Заказать</button>
</td>
</tr>
<tr class='off'>
<td><input value="9" data-price='50.00' name="Product" type="radio" disabled /></td>
<td>Кофэ</td>
<td>50,00</td>
<td>
<button>Заказать</button>
</td>
</tr>
</tbody>
</table>
<div>
<label>
Сумма
<input name="total" id="total" type="text" class="total valid" value="1" aria-invalid="false">
</label>
<input class="button" type="submit" value="Оплатить">
<div>
</form>
</div>
</body>
</html>