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

Question

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

Navigation

#1 by (3 votes)
#2 by (1 votes)

3

I made a quiz with some questions and answers, I would like someone to help me solve the following problem, I want that when clicking the button to see the result of quiz , all the answer options will be locked. The user will no longer be able to change their responses.

javascript html

asked by anonymous 20.02.2015 / 06:16

2 answers

Binary cast is available in PHP? How do I remove the parent element and all its contents when child element is clicked?

score 3 · Answer 1

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>

score 1 · Answer 2

You may also be using it below

Renan 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's better to do it this way

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

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