将类添加到表单选择父级

debugcn 发表于 Dev

拉赫·詹恩

我有一个表格，其中一次只能选择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;
}

Ranjeet Singh |

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。