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 № 1Apenas 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 :)