CODEWITHSUNDEEP
htmlcss
anon
anon

Reputation: 866

How to "lock" an html radiobutton after selection?

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?

Upvotes: 4

Views: 1113

Answers (5)

Mister Jojo
Mister Jojo

Reputation: 22353

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>

Upvotes: 0

The Bomb Squad
The Bomb Squad

Reputation: 4337

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>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273640

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>

Upvotes: 4

Anush Bhatia
Anush Bhatia

Reputation: 644

$('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/

Upvotes: 1

Leonardo
Leonardo

Reputation: 25

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>

Upvotes: 1

Related Questions