How to "lock" an html radiobutton after selection?

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>