限制可选 DOM 复选框

我试图限制用户可以选择的复选框数量。这些复选框是为数组中的每个项目生成的 DOM 输入对象。我目前对此没有运气，因此非常感谢任何帮助。谢谢！

在这里小提琴：http://jsfiddle.net/vVxM2/222/ http://jsfiddle.net/vVxM2/222/

names =["Donny","Danny","Ricky","Eric","Jamie","Bobby","Booby"];
var numberOf = names.length; 
var text = "<ul>";
for (i = 0; i < numberOf; i++) {
    text += "<li class='playerListItem'><label><input type='checkbox' class='playerCheckbox'>" + names[i] + "</label></li>";
    }
text += "</ul>";
document.getElementById("recentPlayersContainer").innerHTML = text;


var limit = 3;
$('input.playerCheckbox').on('change', function(event) {
if($(this).siblings(':checked').length >= limit) {
   this.checked = false;
}
});

你的问题在于change event.

而不是做：

if($(this).siblings(':checked').length >= limit)

你应该做这个：

if($('.playerCheckbox:checked').length >= limit)

另外，如果您的限制最多为 3 个检查，那么您应该这样做：

$('.playerCheckbox:checked').length > limit

因为当活动发生时change引发时，当前复选框已被选中。