Javascript 如果用户选择一个选项don'；I don’我不允许他另选一个

我有一个问题列表，用户必须选择正确或错误。 该列表是自动生成的。但假设我有3行，如下所示：

要查看的html是：

          <div>
            <div>
              <h2>1. You should always let your car warm up before you drive it.</h2>
            </div>
          </div>
          <div>
            <div class="quiz-cols">
              <div class="true-placeholder"><a href="#" data-answer="true" class="icon-true-shape amenitie_icon"></a></div>
            </div>
            <div class="quiz-cols">
              <div class="false-placeholder"><a href="#" data-answer="false" class="icon-false-shape amenitie_icon"></a></div>
            </div>
          </div>
          <div>
            <div>
              <h2>2. Turning off the A/C can improve fuel efficiency.</h2>
            </div>
          </div>
          <div>
            <div class="quiz-cols">
              <div class="true-placeholder"><a href="#" data-answer="false" class="icon-true-shape amenitie_icon"></a></div>
            </div>
            <div class="quiz-cols">
              <div class="false-placeholder"><a href="#" data-answer="false" class="icon-false-shape amenitie_icon"></a></div>
            </div>
          </div>
          <div>
            <div>
              <h2>3. You should top off your gas tank.</h2>
            </div>
          </div>
          <div>
            <div class="quiz-cols">
              <div class="true-placeholder"><a href="#" data-answer="true" class="icon-true-shape amenitie_icon"></a></div>
            </div>
            <div class="quiz-cols">
              <div class="false-placeholder"><a href="#" data-answer="true" class="icon-false-shape amenitie_icon"></a></div>
            </div>
          </div>

这不是我想要的：

正如你看到的，它们都是彩色的。其中只有一个应该有颜色，如果用户选择了错误的一个，但此时这是正确的答案，图标应该是绿色的，如果不正确，那么图标应该是红色的

---

Suggestios？

请注意，要纯用CSS实现这一点，标签必须紧跟在无线电输入之后，这样我们就可以使用

此外，任何具有相同名称的无线电输入一次只能选择其中一个。在下面的示例中，单击“真”将导致“假”变为未选中，单击“假”将导致“真”变为未选中

input[type=“radio”]{
/*隐藏无线电输入。我们不想看到它们-只是标签*/
显示：无；
}
输入[type=“radio”]+标签{
/*默认样式，背景为灰色*/
背景：#ccc；
显示：内联块；
宽度：30px；
高度：30px；
边界半径：15px；
光标：指针；
}
输入[type=“radio”][value=“true”]：选中+标签{
/*当选择“真”收音机时，背景变为绿色*/
背景：绿色；
/*在此处添加其他所需的“打开”样式*/
}
输入[type=“radio”][value=“false”]：选中+标签{
/*当选择“false”收音机时，背景变为红色*/
背景：红色；
/*在此处添加其他所需的“打开”样式*/
}

---

您可以这样做：

$('.quiz-cols a').click(function(e) {
    e.preventDefault();
    // exit if choice already made: users can't change their pick
    if ($(this).parents('.quiz-cols').parent().find('.new-color').length) return;
    // set class according to data-answer:
    $(this).addClass('background-' + ($(this).data('answer')=='true' ? 'green' : 'red'))
           .addClass('new-color');
});

---

最简单的：使用单选按钮。使图形依赖于单选按钮的选中/未选中状态。隐藏单选按钮。使用纯HTML/CSS很简单。如果用户有4个或6个选择呢？您在那里只放了2个。将

输入

包装在

标签

中，不需要

for

属性和

+

选择器不是更好吗？我的意思是。每个

.quick cols

div都是一列，应该包含一个选项。你只放了2个。@NietzscheProgrammer-这是一个例子，你应该可以从这里开始。对于下一行按钮，您只需重复此模式，并为下一行的新按钮“对”使用新的单选输入名称。这就是我需要的。谢谢兄弟@trincot-值得一提的是，他的标记意味着您必须使用

.parent（）

，如果对标记进行任何更改，这将变得脆弱。将一个类添加到顶级div中会很有好处，这样您就可以使用

.closest（'.quick row'）

。

$('.quiz-cols a').click(function(e) {
    e.preventDefault();
    // exit if choice already made: users can't change their pick
    if ($(this).parents('.quiz-cols').parent().find('.new-color').length) return;
    // set class according to data-answer:
    $(this).addClass('background-' + ($(this).data('answer')=='true' ? 'green' : 'red'))
           .addClass('new-color');
});