Question

我有一个列表，其中包含用户必须选择true或false的问题。该列表自动生成。但是，让我说我有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>

这就是我迄今为止的逻辑，它允许元素改变颜色和类似的东西。但我想知道我该怎么做才能让应用程序不允许用户每行选择多个选项。如果用户已经选择了一个，他就无法改变他的选择。

ArticleQuiz.prototype.quizLogic = function(){
    var THIS = this;
    $('.masthead-article-quiz').parent().css('background', '#eeeeee');
    $('.quiz-cols a').on('click', $(this), function(e) {
        e.preventDefault();
        if ($(this).data('answer') === true) {
            $(this).addClass('background-green')
            $(this).addClass('new-color');
        } else if ($(this).data('answer') === false) {
            $(this).addClass('background-red');
            $(this).addClass('new-color');
        }
    });
    return THIS;
};

这不是我想要的：

如你所见，它们都带有颜色。只有其中一个应该有颜色，如果用户选择了错误的颜色，但在那个时刻正确答案，图标应为绿色，如果不正确，则图标应为红色。< / p>

Suggestios？

Answer 1

请注意，要完全使用CSS执行此操作，重要的是标签紧跟在无线电输入之后，以便我们可以使用+ sibling selector

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

input[type="radio"] {
  /* Hide the radio inputs.  We don't want to see them - just the labels! */
  display: none;
}
input[type="radio"] + label {
  /* default style, background is gray */
  background: #ccc;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  cursor: pointer;
}
input[type="radio"][value="true"]:checked + label {
  /* when a "true" radio is selected, background turns green */
  background: green;
  /* add other desired "on" styles here... */

}
input[type="radio"][value="false"]:checked + label {
  /* when a "false" radio is selected, background turns red */
  background: red;
 /* add other desired "on" styles here... */
}

<div>
  <div class="quiz-cols">
    <div class="true-placeholder">
      <input type="radio" name="amenitie" value="true" id="amenitie-true">
      <label for="amenitie-true" class="icon-true-shape"></label>
    </div>
  </div>
  <div class="quiz-cols">
    <div class="false-placeholder">
      <input type="radio" name="amenitie" value="false" id="amenitie-false">
      <label for="amenitie-false" class="icon-false-shape"></label>
    </div>
  </div>
</div>

Answer 2

你可以这样做：

$('.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');
});

如果用户选择一个选项，则不允许他选择另一个选项

2 个答案: