フォームを選択する親にクラスを追加する

Question

私は、一度に2つのチェックボックスしか選択できないフォームを持っています。私はまた、これらのチェックボックスのコンテナliが一度選択された背景が異なるようにする必要があります。私はこれをしました。

ユーザーが3番目のチェックボックスを選択しようとすると、liに追加されるクラスを停止する方法を考えることができません。 jQueryは3番目のチェックボックスの選択を停止します（これは正しい）。私はクラスにそれを加えないように外側のリが必要です。

ご協力いただければ幸いです。私はhasClassを試して、長さ> 2のif文を実行しましたが、私はそれをかなり理解できません。

https://jsfiddle.net/61hof9n0/

HTML

<ul class="" id="new_compare-form"> 
    <li class="main-table"> 
    <span class="ctas"> 
      <span class="cta cta-compare"> 
       <label><input type="checkbox" class="checkboxcompare" name="compare-<?php echo $product['product_id']; ?>" value="compare">Compare</label> 
     </span> 
    </span> 
    </li> 
    <li class="main-table"> 
    <span class="ctas"> 
      <span class="cta cta-compare"> 
       <label><input type="checkbox" class="checkboxcompare" name="compare-<?php echo $product['product_id']; ?>" value="compare">Compare</label> 
     </span> 
    </span> 
    </li> 
    <li class="main-table"> 
    <span class="ctas"> 
      <span class="cta cta-compare"> 
       <label><input type="checkbox" class="checkboxcompare" name="compare-<?php echo $product['product_id']; ?>" value="compare">Compare</label> 
     </span> 
    </span> 
    </li> 
</ul> 

jQueryの

$('input.checkboxcompare').change(function(e){ 
     if ($('input.checkboxcompare:checked').length > 2) { 
      $(this).prop('checked', false); 
     } 
    }) 

    $('#new_compare-form :checkbox').on('click', function(){ 
     $(this).addClass('active'); 
     $(this).closest('li').toggleClass('red'); 
    }); 

CSS

.red { 
    color:red; 
} 

Answer 1

$('input.checkboxcompare').change(function(e){ 
 
\t if ($('input.checkboxcompare:checked').length > 2) { 
 
\t   $(this).prop('checked', false); 
 
      $(this).closest('li').toggleClass('red'); 
 
\t } 
 
\t }) 
 
\t 
 
\t $('#new_compare-form :checkbox').on('click', function(){ 
 
\t  $(this).addClass('active'); 
 
\t  $(this).closest('li').toggleClass('red'); 
 
\t }); 
 
\t

.red { 
 
    color:red; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<ul class="" id="new_compare-form"> 
 
    <li class="main-table"> 
 
    <span class="ctas"> 
 
\t \t <span class="cta cta-compare"> 
 
\t \t \t \t <label><input type="checkbox" class="checkboxcompare" name="compare-<?php echo $product['product_id']; ?>" value="compare">Compare</label> 
 
     </span> 
 
    </span> 
 
    </li> 
 
    <li class="main-table"> 
 
    <span class="ctas"> 
 
\t \t <span class="cta cta-compare"> 
 
\t \t \t \t <label><input type="checkbox" class="checkboxcompare" name="compare-<?php echo $product['product_id']; ?>" value="compare">Compare</label> 
 
     </span> 
 
    </span> 
 
    </li> 
 
    <li class="main-table"> 
 
    <span class="ctas"> 
 
\t \t <span class="cta cta-compare"> 
 
\t \t \t \t <label><input type="checkbox" class="checkboxcompare" name="compare-<?php echo $product['product_id']; ?>" value="compare">Compare</label> 
 
     </span> 
 
    </span> 
 
    </li> 
 
</ul>