RachJenn RachJenn - 6 months ago 8
HTML Question

Adding class to form select parent

I have a form where only 2 checkboxes can be selected at any one time. I also need it so the container li of these checkboxes have a different background once selected. I have done this.

I'm unable to work out how to stop the class being added to the li when the user tries to select a 3rd checkbox. The jQuery stops the 3rd checkbox from being selected (which is correct); but I need the outer li to not have the class added to it.

Any help would be appreciated. I have tried hasClass, and doing if statements in the length>2 but I cannot quite grasp it.

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

$('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>

Comments