How to "lock" an html radiobutton after selection? - html

Question

Given this checkbox html element:
<h4>This is a question?</h4>
<input type="radio" value="1" name="q">answer 1</input>
<input type="radio" value="2" name="q">answer 2</input>
<input type="radio" value="3" name="q">answer 3</input>
How can I lock the state of a checkbox after it has been selected? That is, how can I avoid the user to change his answer?

Answer 1

A hacky idea using CSS. You make a layer that will prevent any click event when one input is checked
.block {
position:relative;
}
.block input:checked ~ i {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
<div class="block">
<h4>This is a question? (blocked)</h4>
<input type="radio" value="1" name="q1">answer 1
<input type="radio" value="2" name="q1">answer 2
<input type="radio" value="3" name="q1">answer 3
<i></i>
</div>
<div >
<h4>This is a question? (not blocked)</h4>
<input type="radio" value="1" name="q2">answer 1
<input type="radio" value="2" name="q2">answer 2
<input type="radio" value="3" name="q2">answer 3
<i></i>
</div>

Answer 2

With Anush Bhatia's example, you would need to also use JQuery.
Here is a simple snippet without the use of JQuery:
function change(yourname) {
var radios = document.getElementsByName(youname);
for (var i=0, iLen=radios.length; i<iLen; i++) {
radios[i].disabled = true;
}
}
Remember that you should also call the function on change using
<input type="radio" value="1" onchange="change(\"q\");" name="q">answer 1</input>

Answer 3

$('input:radio').click(function(){
var $inputs = $('input:radio')
if($(this).is(':radio')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
})
Try using this.
Refer to the link below http://jsfiddle.net/ur9zxo2e/

Answer 4

You could make each question be in ONE element and apply a questionHandle function to each question element
var questionElement1=document.getElementById('q1')
function questionHandle(elem){
var answered=false
function listen(ev){
if(answered){return ev.preventDefault()}
//else, since this only happens IF not pressed already
answered=true //so that it will not be pressed again
//any other thing you want to do for when question is answered below after this INSIDE this function
console.log(`question ${ev.path[0].value} was chosen`)//an example of anything you can do
}
try{
[...elem.children]
.forEach(a=>a.addEventListener('click',listen))
}
catch(err){return Error(err)}
}
questionHandle(questionElement1)
<h4>This is a question?</h4>
<div id="q1">
<input type="radio" value="1" name="q">answer 1</input>
<input type="radio" value="2" name="q">answer 2</input>
<input type="radio" value="3" name="q">answer 3</input>
</div>

Answer 5

I will do that this way :
const myForm = document.forms['my-form']
myForm.radioChoice = {}
myForm.oninput = ({target}) =>
{
if( target.type === 'radio')
{
if (!myForm.radioChoice[target.name])
myForm.radioChoice[target.name] = target.value
else
myForm[target.name].value = myForm.radioChoice[target.name]
}
}
<form action="" name="my-form">
<fieldset>
<legend>Question 1</legend>
<label><input type="radio" value="1" name="q1" />answer 1</label>
<label><input type="radio" value="2" name="q1" />answer 2</label>
<label><input type="radio" value="3" name="q1" />answer 3</label>
</fieldset>
<fieldset>
<legend>Question 2</legend>
<label><input type="radio" value="1" name="q2" />answer 1</label>
<label><input type="radio" value="2" name="q2" />answer 2</label>
<label><input type="radio" value="3" name="q2" />answer 3</label>
</fieldset>
</form>