/ / Ograniczanie użytkownika do liczby zaznaczonych pól wyboru - javascript, tablice, formularze, funkcja, pole wyboru

Ograniczanie użytkownika pod kątem liczby zaznaczonych pól wyboru - javascript, tablice, formularze, funkcje, pole wyboru

Próbuję stworzyć stronę, na której sąwiele pól wyboru, ale użytkownik może zaznaczać tylko 2 pola wyboru. Dostałem ten kod, ale nie działa, ponieważ nadałem mu nazwę jako tablicę. Sugeruj, jak używać tej nazwy dla pól wyboru przy wywoływaniu funkcji 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>

Odpowiedzi:

2 dla odpowiedzi № 1

Po prostu zmień tę linię

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

albo użyj document.getElementsByName

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


1 dla odpowiedzi nr 2

Dla czystego javascript -

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

Dla użytkowników jQuery -

Kod 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 dla odpowiedzi № 3

Czy nie możesz użyć

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

-1 dla odpowiedzi № 4

Tak. Możesz ograniczyć użytkownika za pomocą size funkcjonować

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

Tutaj jest Jsfiddle

Mam nadzieję, że to pomoże :)