Функция отключающая кнопку если инпут с радио не выбран

Question

Вопрос в том, как присвоить кнопке disabled пока не выбран один из радио инпутов. Функция которая сменяет блоки с радио инпутами

function next_qestion() {
if(document.getElementById('qestion2').style.display == "block"){
    document.getElementById('qestion2').style.display = "none";
    document.getElementById('qestion3').style.display = "block";
}
if(document.getElementById('qestion1').style.display == "block"){
    document.getElementById('qestion1').style.display = "none";
    document.getElementById('qestion2').style.display = "block";
}

Сами блоки

    <div id="qestion1" style="display:none;">
        <p>Задание 1.</p>
        <div id="container"><audio id="sound" src="rvpi/1.1.wav" preload="auto" controls></audio></div>
    <div class="alert alert-secondary" role="alert">
        <p><span id="v_34"></span><br><br><br>
            <label style="border: 2px solid black; width: 350px; margin-bottom:20px"><input class=" visual" type="radio" id="z_1" name="audirovanie1" value="28" >Вот он, справа.</label style="border: 2px solid black; width: 350px; margin-bottom:20px"><br>
            <label style="border: 2px solid black; width: 350px; margin-bottom:20px"><input class=" visual" type="radio" id="z_1" name="audirovanie1" value="250">На автобусе №12.</label style="border: 2px solid black; width: 350px; margin-bottom:20px"><br>
            <label style="border: 2px solid black; width: 350px; margin-bottom:20px"><input class=" visual" type="radio" id="z_1" name="audirovanie1" value="43">Я не еду в центр.</label style="border: 2px solid black; width: 350px; margin-bottom:20px"><br>
        </p>
    </div>
    </div>
    <div id="qestion2" style="display:none;">
        <p>Задание 2.</p>
        <div id="container"><audio id="sound" src="rvpi/2.1.wav" preload="auto" controls></audio></div>
    <div class="alert alert-secondary" role="alert">
        <p><span id="v_35"></span><br><br><br>
            <label style="border: 2px solid black; width: 350px; margin-bottom:20px"><input class=" visual" type="radio" id="z_1" name="audirovanie2" value="28" >У меня на родине никогда не бывает снега.</label style="border: 2px solid black; width: 350px; margin-bottom:20px"><br>
            <label style="border: 2px solid black; width: 350px; margin-bottom:20px"><input class=" visual" type="radio" id="z_1" name="audirovanie2" value="250">Вчера весь день шёл снег.</label style="border: 2px solid black; width: 350px; margin-bottom:20px"><br>
            <label style="border: 2px solid black; width: 350px; margin-bottom:20px"><input class=" visual" type="radio" id="z_1" name="audirovanie2" value="43">Думаю, да.</label style="border: 2px solid black; width: 350px; margin-bottom:20px"><br>
        </p>
    </div>
    </div>
<button id="next" class="btn btn-lg btn-primary btn-block" style="margin-left:auto;margin-right:10%;width:200px;" onclick="next_qestion();">Вперед</button>

Answer 1

Правильно ли я понял, что вам требуется такой код:

// получить список всех элементов radio
let radios = document.querySelectorAll('#z_1');

// определить, выбран ли какой-нибудь элемент radio    
let isChecked = false;
    
for (let obj of radios) {
    if (obj.checked) {
        isChecked = true;
    }
}

// установить состояние кнопки
document.querySelector('#next').disabled = !isChecked;

P.S.

я бы возможно использовал бы не id, а class для radio-элементов, ну или хотя бы делал разные id для разных блоков - а то у вас для всех 6 элементов 1 и тот же id

Answer 2

Я не настаиваю, но есть возможность сделать все только на CSS

a:not(#start) {
  pointer-events: none;
  opacity: 0.5;
  user-select: none;
}

input:checked ~ a:not(#start) {
  pointer-events: unset;
  opacity: 1;
}

*:target ~ #start,
.hidden {
  display: none;
}

.hidden:target {
  display: unset;
}

<div id="q1" class="hidden">
  Question 1<br>
  <input type=radio name='one'>
  <input type=radio name='one'>
  <input type=radio name='one'>
  <br>
  <a href="#q2"><button>next</button></a>
</div>

<div id="q2" class="hidden">
  Question 2<br>
  <input type=radio name='two'>
  <input type=radio name='two'>
  <input type=radio name='two'>
  <br>
  <a href="#q3"><button>next</button></a>
</div>

<div id="q3" class="hidden">
  Question 3<br>
  <input type=radio name='three'>
  <input type=radio name='three'>
  <input type=radio name='three'>
  <br>
  <a href="#done"><button>finish</button></a>
</div>

<div id="done" class="hidden">done</div>

<a id="start" href="#q1"><button>start quiz</button></a>

БЛОГ НА HUSL

Функция отключающая кнопку если инпут с радио не выбран

Ответы (2 шт):