How to block all "radios" of a form when clicking a button?

Asked

Viewed 804 times

3

I made a quiz with a few questions and answers, I would like someone to help me solve the following problem, I want to click on the button to see the result of the quiz, all response options are locked. The user can no longer change his answers.

javascript html

2 answers

3

Just set/change the value disabled of the element to true.

document.getElementById("foo").disabled = true;

sample code:

var radios = document.getElementsByName('dog');

document.getElementById('block').onclick = function(){ 
    var len = radios.length;
    for(var i = 0; i < len; i++){
        radios[i].checked = false; // caso tenha algum 'radio' marcado
        radios[i].disabled = true; 
    }
}
<button id='block'>Bloquear Formulário</button>

<p><strong>1) Quantas patas tem um cachorro?</strong></p>
<form>
  <input type='radio' name='dog'/>1<br>
  <input type='radio' name='dog'/>2<br>
  <input type='radio' name='dog'/>3<br>
  <input type='radio' name='dog'/>5<br>
  <input type='radio' name='dog'/>Tenho certeza que não são 4<br>
</form>

1

You may be using also this way below

Renan’s code.

<button id='block'>Bloquear Formulário</button>

<p><strong>1) Quantas patas tem um cachorro?</strong></p>
<form>
  <input type='radio' name='dog'/>1<br>
  <input type='radio' name='dog'/>2<br>
  <input type='radio' name='dog'/>3<br>
  <input type='radio' name='dog'/>5<br>
  <input type='radio' name='dog'/>Tenho certeza que não são 4<br>
</form>

Only the Javascript code will change, I think it is better to do this way

var radios = document.getElementsByName('dog');

document.getElementById('block').onclick = function(){ 
    radios.forEach(function(el) {
       el.checked = false;
       el.disabled = true; 
    });
}

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.