ユーザが1つのオプションを選択しても、彼に別のものを選択させない場合

Question

私は、ユーザが真または偽を選択しなければならない質問を持つリストを持っています。 そのリストは自動的に生成されます。要素はそのを変更することができます私がこれまで持っているロジック

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

そして、この：であることを確認するために、

HTML：しかしさんは、私はこれらのような3行を持っているとしましょう色とそのようなもの。しかし、私は、アプリが行ごとに複数のオプションを選択できるようにするために何ができるかを知りたいと思っています。ユーザーが既に1つを選択した場合、彼は自分の選択を変更することはできません。

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

これは私が望むものではありません：

見ての通り、それらの両方は色です。それらのうちの1つだけが色を持っている必要があります。ユーザーが間違ったものを選択した場合、その瞬間に適切な答えが表示され、アイコンが緑色になり、正しくない場合は赤色になります。

Suggestios？純粋にCSSでこれを行うには

Answer 1

あなたはこのようにそれを行うことができます：

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

Answer 2

注意が、それは我々はまた+ sibling selector

を使用することができるようにラベルは、ラジオ入力した直後であることが重要だ、同じ名前のラジオの入力は今まで1を許可します一度に選択することができます。下の例では、 "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>