Тестирование на сайте, как сделать что бы нельзя менять уже выбранный вариант?

Question

[Алексе Пономарев]

<label><input name="q1" type="radio" value="a"><div onclick="toggle(hidden_content)" class="test1">1</div></label>
  <label><input name="q1" type="radio" value="b"><div onclick="toggle(hidden_content)" class="test2">2</div></label>
  <label><input name="q1" type="radio" value="c"><div onclick="toggle(hidden_content)" class="test1">3</div></label>

У меня есть тестирование на сайте, class="test1" загорается вариант красным, class="test2" загорается зеленым,
цель такая при выборе любого варианта должен загораться он и еще правильный, onclick="toggle(hidden_content)" позволят выводить описание правильного ответа и кнопку далее.
Я обыскался но не нашел в интернете ни чего полезного для этой задачи

Comments

[WapSter]

Еще бы. Задача довольно специфичная и обычно для нее нанимают знающего человека.

Answer 1

[Эдуард]

Вот Вам собранный на коленке пример.

<style>
 .answers {
  width: 100px;
  }
.option {
  margin-bottom: 15px;
  }
.option-red {
  color: red;
}
.option-green {
  color: green;
}
</style>

<div class='answers'>
  <div class='option' id='op1'>
    <input type='radio' value='1' onClick="check(this)">
    <span>Вариант 1</span>
  </div>
  <div class='option' id='op2'>
    <input type='radio' value='2' onClick="check(this)" >
    <span>Вариант 2</span>
  </div>
  <div class='option' id='op3'>
    <input type='radio' value='3' onClick="check(this)">
    <span>Вариант 3</span>
  </div>
</div>

Метод для ajax, вызываемый в success:

function check(elem) {
  var correct = 2;  // id правильного ответа, полученный в ajax
  if (elem.value == correct) {
    document.getElementById('op' + correct).classList.toggle("option-green");
  }
  else {
    document.getElementById('op' + correct).classList.toggle("option-green");
    document.getElementById('op' + elem.value).classList.toggle("option-red");
  }
   var inputs = document.querySelectorAll('input');
  for (let input of inputs) {
    input.setAttribute('disabled', '')
  }
}