Question

我有一个表格，任何时候都只能选择2个复选框。我也需要它，所以这些复选框的容器li一旦选中就有不同的背景。我做到了这一点。

当用户尝试选择第三个复选框时，我无法确定如何停止添加到li的类。 jQuery阻止第三个复选框被选中（这是正确的）;但我需要外部的li没有添加类。

任何帮助将不胜感激。我已经尝试过hasClass，并且在长度> 2的情况下执行if语句，但我无法理解它。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

添加类以形成选择父级

1 个答案: