限制可选DOM复选框 [英] Limit Selectable DOM Checkboxes

问题描述

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

I am trying to limit the number of checkboxes a user can select. These checkboxes are DOM input objects generated for each item in an array. I'm having no luck with this currently, so any help is much appreciated. Thanks!

小提琴在这里： 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;
}
});

推荐答案

您的问题在更改事件。

而不是这样做：

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

你应该这样做：

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

另外，如果您的上限为最大值3，则应执行以下操作：

Also, if your limit is maximum 3 checked, then you should do:

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

因为事件更改现在已经选中了复选框。

Because when the event change is raised, the current checkbox is already checked.

这篇关于限制可选DOM复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！