jquery - 添加类以形成选择父级

Question

我有一个表单，其中一次只能选中 2 个复选框。我也需要它，以便这些复选框的容器 li 在选中后具有不同的背景。我已经这样做了。

当用户尝试选择第三个复选框时，我无法弄清楚如何停止将类添加到 li 中。 jQuery 停止选中第三个复选框(这是正确的)；但我需要外部 li 不添加类。

如有任何帮助，我们将不胜感激。我试过 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){
	   if ($('input.checkboxcompare:checked').length > 2) {
	        $(this).prop('checked', false);
          $(this).closest('li').toggleClass('red');
	   }
	})
	
	$('#new_compare-form :checkbox').on('click', function(){
	    $(this).addClass('active');
	    $(this).closest('li').toggleClass('red');
	});
	

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