我主要完成了代码，只是坚持了一件小事。如果有人可以帮助我，因为Jquery对我来说真的很新。我只想在选中两个复选框时禁用其余复选框。下面是代码，一切都很好，只是不能限制复选框，以便在选中两个时禁用。所以在列表之外，我应该只能检查两个。
请查看实时演示网址以便更清楚地了解 http://www.babaraliseehar.com/onepage/index.php 单击比较按钮以显示我想要复选框功能的模式。
$('.btn').click(function() {
$('.modal')
.prop('class', 'modal fade') // revert to default
.addClass( $(this).data('direction') );
$('.modal').modal('show');
});
$("#answers-type1 li").click(function() {
// $(this).css("background-color","#27B249");
// if ($("#answers-type1 li.place").length < 2 || $(this).hasClass('place')) {
$( this ).toggleClass( "place" );
//$( this ).toggleClass( "place" );
});
$('ul.myclass li').click( function() {
var $cb = $(this).find(":checkbox");
if (!$cb.prop("checked")) {
$cb.prop("checked", true);
} else {
$cb.prop("checked", false);
}
if($( ".number:checked" ).length == 2 && $( ".number:checked" ).length < 3)
{
$('#btn').prop('disabled', false);
}
else
{
$('#btn').prop('disabled', true);
}
});.myclass li span {
margin-left: 5px;
}
.place {
background-color: #27B249 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade">
<div class="modal-dialog" style="width: 15%;">
<div class="modal-content">
<div class="modal-header" style="font-size: 18px;text-align: center;background-color: red;">
<h4 class="modal-title" style="color: #fff;" >Compare Products</h4>
</div>
<div class="modal-body" style="font-size: 16px">
<form action="test.php" method="post">
<ul id="answers-type1" class="myclass" style="list-style: none;padding-right: 10px;padding-left: 10px;">
<li class="module" style="background: #668693;" value="Listol"><input name="listol" type="checkbox" value="Listol" class="number" style="display: none;"><span>Listol</span></li>
<li class="module" style="background: #668693;" value="Synaptal"><input name="synaptal" type="checkbox" value="Synaptal" class="number" style="display: none;"><span>Synaptal</span></li>
<li class="module" style="background: #668693;" value="Synaptal"><input name="focus_formula" type="checkbox" value="Focus Formula" class="number" style="display: none;"><span>Focus Formula</span></li>
<li class="module" style="background: #668693;" value="Bright Spark"><input name="bright_spark" type="checkbox" class="number" value="Bright Spark" style="display: none;"><span>Bright Spark</span></li>
<li class="module" style="background: #668693;" value="Triple Complex"><input name="triple_complex" type="checkbox" class="number" value="Triple Complex" style="display: none;"><span>Triple Complex</span></li>
</ul>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-default clos" data-dismiss="modal" data-direction='left'>Cancel</button>
<input type="submit" id ="btn" value="Compare" name="submit" class="btn btn-success compare" disabled>
</form>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
答案 0 :(得分：0)
只需添加支票
即可 if ($("input[type='checkbox']:checked").length == 2) {
if (!$(this).hasClass('place')) {
return;
}
}
里面的
$('ul.myclass li').click(function() {
它将确保您不能选择2个以上，但同时允许您取消选择任何一个。
见下面的演示
$('.btn').click(function() {
$('.modal')
.prop('class', 'modal fade') // revert to default
.addClass($(this).data('direction'));
$('.modal').modal('show');
});
$('ul.myclass li').click(function() {
if ($("input[type='checkbox']:checked").length == 2) {
if (!$(this).hasClass('place')) {
return;
}
}
var $cb = $(this).find(":checkbox");
if (!$cb.prop("checked")) {
$cb.prop("checked", true);
} else {
$cb.prop("checked", false);
}
if ($("input[type='checkbox']:checked").length == 2) {
$('#btn').prop('disabled', false);
} else {
$('#btn').prop('disabled', true);
}
$(this).toggleClass("place");
});.myclass li span {
margin-left: 5px;
}
.place {
background-color: #27B249 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade">
<div class="modal-dialog" style="width: 15%;">
<div class="modal-content">
<div class="modal-header" style="font-size: 18px;text-align: center;background-color: red;">
<h4 class="modal-title" style="color: #fff;">Compare Products</h4>
</div>
<div class="modal-body" style="font-size: 16px">
<form action="test.php" method="post">
<ul id="answers-type1" class="myclass" style="list-style: none;padding-right: 10px;padding-left: 10px;">
<li class="module" style="background: #668693;" value="Listol"><input name="listol" type="checkbox" value="Listol" class="number" style="display: none;"><span>Listol</span></li>
<li class="module" style="background: #668693;" value="Synaptal"><input name="synaptal" type="checkbox" value="Synaptal" class="number" style="display: none;"><span>Synaptal</span></li>
<li class="module" style="background: #668693;" value="Synaptal"><input name="focus_formula" type="checkbox" value="Focus Formula" class="number" style="display: none;"><span>Focus Formula</span></li>
<li class="module" style="background: #668693;" value="Bright Spark"><input name="bright_spark" type="checkbox" class="number" value="Bright Spark" style="display: none;"><span>Bright Spark</span></li>
<li class="module" style="background: #668693;" value="Triple Complex"><input name="triple_complex" type="checkbox" class="number" value="Triple Complex" style="display: none;"><span>Triple Complex</span></li>
</ul>
</form>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-default clos" data-dismiss="modal" data-direction='left'>Cancel</button>
<input type="submit" id="btn" value="Compare" name="submit" class="btn btn-success compare" disabled>
</form>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->