/ / Limitando usuário para o número de caixas de seleção para marcada - javascript, matrizes, formulários, função, caixa de seleção

Limitando o usuário para o número de caixas de seleção para marcada - javascript, matrizes, formulários, função, caixa de seleção

Estou tentando desenvolver uma página na qual existemmuitas caixas de seleção, mas o usuário é restrito para verificar apenas 2 caixas de seleção. Eu tenho esse código, mas não está funcionando como eu estou dando um nome como matriz. Por favor, sugira como usar este nome para caixas de seleção ao chamar a função javascript.

function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup;
var limit=limit;
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick=function(){
var checkedcount=0;
for (var i=0; i<checkgroup.length; i++)
checkedcount+=(checkgroup[i].checked)? 1 : 0;
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" checkboxes");
this.checked=false;
}
}
}
}
checkboxlimit(document.forms.world.seatdata, 2);
<form id="world" name="world">
<table>
<tr>
<td>
<input type="checkbox" name="seatdata[]" value="0|12" id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|11" id="A10"  />
<label for="A10">A10</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|10" id="A9"  />
<label for="A9">A9</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|9" id="A8"  />
<label for="A8">A8</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|6" id="A7"  />
<label for="A7">A7</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|5" id="A6"  />
<label for="A6">A6</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|4" id="A5"  />
<label for="A5">A5</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|3" id="A4"  />
<label for="A4">A4</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|2" id="A3" />
<label for="A3">A3</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|1" id="A2" />
<label for="A2">A2</label>
</td>
<td>
<input type="checkbox" name="seatdata[]" value="0|0" id="A1" unchecked />
<label for="A1">A1</label>
</td>
</tr>
</table>
</form>

Respostas:

2 para resposta № 1

Apenas mude esta linha

checkboxlimit(document.forms.world.seatdata, 2); para checkboxlimit(document.forms.world["seatdata[]"], 2);

ou usar document.getElementsByName

checkboxlimit(document.getElementsByName("seatdata[]"), 2);


1 para resposta № 2

Para javascript puro -

checkboxlimit(document.getElementsByName("seatdata[]"), 2);

Para usuários do jQuery -

Código HTML-

<input type="checkbox" class="abc" />hello1
<input type="checkbox" class="abc" />hello2
<input type="checkbox" class="abc" />hello3
<input type="checkbox" class="abc" />hello4
<input type="checkbox" class="abc" />hello5
<input type="checkbox" class="abc" />hello6
<input type="checkbox" class="abc" />hello7
<input type="checkbox" class="abc" />hello8

Jquery Code-

var limit = 2;
var count = 0;
$(".abc").change(function(){
count++;
if(count > limit){
alert("You cant select more than "+limit+" checkboxes");
this.checked=false;
}
});

0 para resposta № 3

Você não pode usar

checkboxlimit(document.getElementsByName("seatdata[]"), 2);

-1 para resposta № 4

Sim. Você pode restringir o usuário usando o size função

$("#world :checkbox").click(function() {
if ($("#world :checkbox:checked").size() > 2) {
alert("You can only select a maximum of 2 checkboxes");
return false;
}
});

Aqui está o Jsfiddle

Espero que ajude :)