实现点击式选择题：点击正确选项后禁用其他选项的jQuery方案

嘿，我明白你的困扰啦！你现在的问题是用户如果先点了正确答案，后续点击错误选项依然会触发提示和样式变化，对吧？这是因为你用了.one()绑定错误选项的事件，但这个绑定并不会因为正确选项被点击而自动取消。下面给你两种简单的解决方案，你可以选一种适合你的：

方案一：用标志变量控制事件执行 #

我们可以定义一个变量来标记用户是否已经答对，在错误选项的点击事件里先判断这个变量，只有还没答对的时候才执行操作：

// 定义标志变量，初始为false表示还没答对
let isAnsweredCorrectly = false;

// 错误选项的点击事件
$(".choices:not(#answer)").on("click", function() {
  // 如果已经答对了，直接返回，不执行任何操作
  if (isAnsweredCorrectly) return;
  
  $(this).css("background-color", "red");
  alert("sorry, that's incorrect");
});

// 正确选项的点击事件
$("#answer").on("click", function() {
  // 标记为已答对
  isAnsweredCorrectly = true;
  
  $(this).css("background-color", "grey");
  $("#blank").remove();
  $("#blank2").append($("#answer"));
});

方案二：答对后直接解绑错误选项的事件 #

这种方式更直接，当用户点击正确选项后，直接移除错误选项上的所有点击事件，这样后续点击就完全不会触发了：

// 错误选项的点击事件
$(".choices:not(#answer)").on("click", function() {
  $(this).css("background-color", "red");
  alert("sorry, that's incorrect");
});

// 正确选项的点击事件
$("#answer").on("click", function() {
  $(this).css("background-color", "grey");
  $("#blank").remove();
  $("#blank2").append($("#answer"));
  
  // 解绑错误选项的点击事件，彻底阻止后续触发
  $(".choices:not(#answer)").off("click");
});

你的HTML结构不需要修改，直接用原来的就行：

<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>

为什么原来的代码不行？ #

你之前用的.one()只会让每个错误选项的事件触发一次，但如果用户先点正确选项，错误选项的事件绑定还在，所以第一次点击错误选项还是会触发。上面的两种方案都能完美解决这个问题，方案一更灵活（方便后续扩展其他逻辑），方案二更简洁直接。

内容的提问来源于stack exchange，提问作者newyorkaru