0

Есть форма, в ней несколько полей, в них радио-кнопки со значением от 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>

2
  • 1
    Добавил ответ. Думаю он подойдёт)) 23 янв 2021 в 10:33
  • @Алексей-Шиманский спасибо большое! Именно то, что нужно!
    – ZikWal
    23 янв 2021 в 10:38

2 ответа 2

1

Возможно ещё надо допилить напильником, но задел таков:

const Selector = {
    quest: '.quest',
    radioButton: 'input[type=radio]',
    checkedRadio: 'input[type=radio]:checked',    
    label: '.form_radio_btn label',
};

$(Selector.radioButton).on('click', function() {    
    let sum = 0;
    let maxSum = 10;
    let clickedVal = +$(this).val();
    $('button[type=submit]').prop("disabled", true);

    $(Selector.checkedRadio).each(function(index, element) {
        sum += +$(this).val();
    });

    if (sum <= maxSum) {
        let $questWrapper = $(Selector.quest);
        
        $questWrapper.find(Selector.label).removeClass('disable-btn');
        $questWrapper.each(function(index, element) {
            let $label = $(this).find(Selector.label);
            let checkedVal = $(this).find(Selector.checkedRadio).val();

            $label.each(function(index, element) {
                let currentVal = +$(this).text();
                
                if (currentVal > checkedVal && sum - checkedVal + currentVal > maxSum)
                    $(this).addClass('disable-btn');                
            });
      });
    }

    if (sum === maxSum) {
        $('button[type=submit]').prop("disabled", false);
    }
});
body {
  font-size: 11px;
}

.disable-btn {
  pointer-events: none;
  background: grey;
}


/*--------------------------*/

.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Тест</title>
</head>

<body>
  <form class="" action="index.html" method="post">
    <h1>Распределите 10 балов среди утверждений</h1>
    <div class="quest-1 quest">
      <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 quest">
      <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 quest">
      <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 quest">
      <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>

0

раз уж написал, пусть останется. без раскраски нективных радио-кнопок.

let $btns = $(".form_radio_btn input");

$btns.click(function(){
  let values = $btns.filter(":checked")                  
                  .get()
                  .map(v => +v.value );
                  
  let sum = values.reduce((acc,v) => acc + v, 0);
  let l = values.length;
                  
  if(sum > 10){
    $(this).prop('checked', false);
    sum -= $(this).val();
    l--;
  }
                  
  let allow = sum <= 10 && l == 4;
  $("[type=submit]").prop('disabled', allow ? '' : 'disabled');
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" >Отправить</button>
    </form>

1
  • Спасибо большое, но Ваш код, все же, оставляет возможность выбрать большее число! (Хоть и не показывает это визуально - кнопка отключается при большем выборе) В любом случае, может кому-то понадобиться именно Ваше решение! Спасибо Вам большое!
    – ZikWal
    23 янв 2021 в 10:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.