Настройка интерактивного выбора

Question

Я новичок в JQuery, и у меня есть вопрос о порядке событий с моим кодом.У меня есть вопрос с несколькими вариантами ответов, под ним 3 варианта.Я хочу, чтобы пользователь нажал на правильный ответ.Моя проблема в том, что если пользователь нажимает на правильный ответ сначала , то я не хочу, чтобы что-то происходило, если они затем нажимают на другие 2 поля.

Как бы я это сделал?Я считаю, что мне нужно заявление if, но я не уверен, как его настроить, чтобы делать то, что я хотел.Любые советы / помощь будут оценены.

Это в моем разделе сценария:

$(".choices:not(#answer)").one("click", function() {
  $(this).css("background-color", "red");
  alert("sorry, that's incorrect");
});

$(".choices[id]").one("click", function() {
  $(this).css("background-color", "grey");
  $("#blank").remove();
  $("#blank2").append($("#answer"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="youyaku">
  <table id="regular" align="center">
    <tr>
      <td colspan="3">
        I have to go <span id="blank2"></span><span id="blank">____</span> the hospital.
      </td>
    </tr>
    <tr>
      <td class="choices">
        <span>for</span>
      </td>
      <td id="answer" class="choices">
        <span>to</span>
      </td>
      <td class="choices">
        <span>at</span>
      </td>
    </tr>
  </table>
</div>

Answer 1

Используйте переключатель в качестве элемента управления, обычно используемого для этой цели. Ваш код должен быть следующим.Учитывая, что вам нужно отключить все остальные кнопки после выбора одной.

var radios = [].slice.call(document.querySelectorAll('input[name=level]'));

radios.forEach(function(radio) {
    radio.addEventListener('change', function() { 
        radios.forEach(function(r) {
            r.disabled = r !== radio;
        });
    });
});