javascript - 限制可选择的 DOM 复选框

Question

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

在这里 fiddle :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;
}
});

Answer 1

您的问题出在 change 事件中。

而不是做:

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

你应该这样做:

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

此外，如果您的限制是最多检查 3 个，那么您应该:

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

因为当事件 change 被触发时，当前复选框已经被选中。