Hinzufügen von Klasse zu Formularauswahl

Question

Ich habe ein Formular, wo nur 2 Kontrollkästchen gleichzeitig ausgewählt werden können. Ich brauche es auch, damit der Container li dieser Checkboxen einen anderen Hintergrund hat, sobald er ausgewählt ist. Ich hab's gemacht.

Ich bin nicht in der Lage herauszufinden, wie Sie die Klasse, die hinzugefügt wird, um die Li zu stoppen, wenn der Benutzer versucht, ein 3. Kontrollkästchen auswählen. Die jQuery beendet die Auswahl des dritten Kontrollkästchens (was korrekt ist); aber ich brauche den äußeren li, um die Klasse nicht hinzuzufügen.

Jede Hilfe wäre willkommen. Ich habe hasClass ausprobiert und mache Anweisungen in der Länge> 2 aber ich kann es nicht ganz fassen.

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>