Есть форма, в ней несколько полей, в них радио-кнопки со значением от 0 и выше, а так же кнопка отправить - которая не активна. Нужно ограничить выбор (я так понимаю с помощью JavaScript или jQuery) десятью балами. То есть, чтобы пользователь мог распределить 10 балов между полями выбора и при достижении в 10 балов (суммарно) - кнопка "отправить" становилась активной. А главное, чтобы больше 10 балов выбрать было нельзя.
Код на CODEPEN: https://codepen.io/zikwal/pen/RwGmQZL
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Тест</title>
</head>
<body>
<style media="screen">
.form_radio_btn {
display: inline-block;
margin-right: 10px;
}
.form_radio_btn input[type=radio] {
display: none;
}
.form_radio_btn label {
display: inline-block;
cursor: pointer;
padding: 0px 15px;
line-height: 34px;
border: 1px solid #999;
border-radius: 6px;
user-select: none;
}
/* Checked */
.form_radio_btn input[type=radio]:checked + label {
background: #ffe0a6;
}
/* Hover */
.form_radio_btn label:hover {
color: #666;
}
.button {
margin: 20px;
}
</style>
<form class="" action="index.html" method="post">
<h1>Распределите 10 балов среди утверждений</h1>
<div class="quest-1">
<h2>1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<div class="form_radio_btn">
<input id="radio-0_1" type="radio" name="radio-1" value="0" checked>
<label for="radio-0_1">0</label>
</div>
<div class="form_radio_btn">
<input id="radio-1_1" type="radio" name="radio-1" value="1">
<label for="radio-1_1">1</label>
</div>
<div class="form_radio_btn">
<input id="radio-2_1" type="radio" name="radio-1" value="2">
<label for="radio-2_1">2</label>
</div>
<div class="form_radio_btn">
<input id="radio-3_1" type="radio" name="radio-1" value="3">
<label for="radio-3_1">3</label>
</div>
<div class="form_radio_btn">
<input id="radio-4_1" type="radio" name="radio-1" value="4">
<label for="radio-4_1">4</label>
</div>
<div class="form_radio_btn">
<input id="radio-5_1" type="radio" name="radio-1" value="5">
<label for="radio-5_1">5</label>
</div>
<div class="form_radio_btn">
<input id="radio-6_1" type="radio" name="radio-1" value="6">
<label for="radio-6_1">6</label>
</div>
<div class="form_radio_btn">
<input id="radio-7_1" type="radio" name="radio-1" value="7">
<label for="radio-7_1">7</label>
</div>
<div class="form_radio_btn">
<input id="radio-8_1" type="radio" name="radio-1" value="8">
<label for="radio-8_1">8</label>
</div>
<div class="form_radio_btn">
<input id="radio-9_1" type="radio" name="radio-1" value="9">
<label for="radio-9_1">9</label>
</div>
<div class="form_radio_btn">
<input id="radio-10_1" type="radio" name="radio-1" value="10">
<label for="radio-10_1">10</label>
</div>
</div>
<div class="quest-2">
<h2>2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<div class="form_radio_btn">
<input id="radio-0_2" type="radio" name="radio-2" value="0" checked>
<label for="radio-0_2">0</label>
</div>
<div class="form_radio_btn">
<input id="radio-1_2" type="radio" name="radio-2" value="1">
<label for="radio-1_2">1</label>
</div>
<div class="form_radio_btn">
<input id="radio-2_2" type="radio" name="radio-2" value="2">
<label for="radio-2_2">2</label>
</div>
<div class="form_radio_btn">
<input id="radio-3_2" type="radio" name="radio-2" value="3">
<label for="radio-3_2">3</label>
</div>
</div>
<div class="quest-3">
<h2>3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<div class="form_radio_btn">
<input id="radio-0_3" type="radio" name="radio-3" value="0" checked>
<label for="radio-0_3">0</label>
</div>
<div class="form_radio_btn">
<input id="radio-1_3" type="radio" name="radio-3" value="1">
<label for="radio-1_3">1</label>
</div>
<div class="form_radio_btn">
<input id="radio-2_3" type="radio" name="radio-3" value="2">
<label for="radio-2_3">2</label>
</div>
<div class="form_radio_btn">
<input id="radio-3_3" type="radio" name="radio-3" value="3">
<label for="radio-3_3">3</label>
</div>
<div class="form_radio_btn">
<input id="radio-4_3" type="radio" name="radio-3" value="4">
<label for="radio-4_3">4</label>
</div>
<div class="form_radio_btn">
<input id="radio-5_3" type="radio" name="radio-3" value="5">
<label for="radio-5_3">5</label>
</div>
</div>
<div class="quest-4">
<h2>4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<div class="form_radio_btn">
<input id="radio-0_4" type="radio" name="radio-4" value="0" checked>
<label for="radio-0_4">0</label>
</div>
<div class="form_radio_btn">
<input id="radio-1_4" type="radio" name="radio-4" value="1">
<label for="radio-1_4">1</label>
</div>
<div class="form_radio_btn">
<input id="radio-2_4" type="radio" name="radio-4" value="2">
<label for="radio-2_4">2</label>
</div>
<div class="form_radio_btn">
<input id="radio-3_4" type="radio" name="radio-4" value="3">
<label for="radio-3_4">3</label>
</div>
</div>
<button type="submit" class="button" name="button" disabled>Отправить</button>
</form>
</body>
</html>