max 2 vinkjes bij checkboxes werkt niet (wel op Fiddle)
Maar dat lukt me niet. Al paar voorbeelden getest die via fiddle werken.
Dat gaat prima.
Ook als ik de afzonderlijke html test. En apart de javascript.
Dit stukje maakt deel uit van een form.
Wat doe ik verkeerd?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$('input[type=checkbox]').change(function(e){
if ($('input[type=checkbox]:checked').length > 2) {
$(this).prop('checked', false)
alert("allowed only 2");
}
})
</script>
</head>
<body>
<input class="single-checkbox" type="checkbox" name="Werk" value="Zang">Zang
<input class="single-checkbox" type="checkbox" name="Werk" value="Geluid">Geluid
<input class="single-checkbox" type="checkbox" name="Werk" value="DJ">DJ
<input class="single-checkbox" type="checkbox" name="Werk" value="Video">Video<br>
<input class="single-checkbox" type="checkbox" name="Werk" value="Producent">Producent
<input class="single-checkbox" type="checkbox" name="Werk" value="Tekst">Tekst
<input class="single-checkbox" type="checkbox" name="Werk" value="Verkoop">Verkoop
<input class="single-checkbox" type="checkbox" name="Werk" value="Overig">Overig
</body>
</html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$('input[type=checkbox]').change(function(e){
if ($('input[type=checkbox]:checked').length > 2) {
$(this).prop('checked', false)
alert("allowed only 2");
}
})
</script>
</head>
<body>
<input class="single-checkbox" type="checkbox" name="Werk" value="Zang">Zang
<input class="single-checkbox" type="checkbox" name="Werk" value="Geluid">Geluid
<input class="single-checkbox" type="checkbox" name="Werk" value="DJ">DJ
<input class="single-checkbox" type="checkbox" name="Werk" value="Video">Video<br>
<input class="single-checkbox" type="checkbox" name="Werk" value="Producent">Producent
<input class="single-checkbox" type="checkbox" name="Werk" value="Tekst">Tekst
<input class="single-checkbox" type="checkbox" name="Werk" value="Verkoop">Verkoop
<input class="single-checkbox" type="checkbox" name="Werk" value="Overig">Overig
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<input class="single-checkbox" type="checkbox" name="Werk" value="Zang">Zang
<input class="single-checkbox" type="checkbox" name="Werk" value="Geluid">Geluid
<input class="single-checkbox" type="checkbox" name="Werk" value="DJ">DJ
<input class="single-checkbox" type="checkbox" name="Werk" value="Video">Video<br>
<input class="single-checkbox" type="checkbox" name="Werk" value="Producent">Producent
<input class="single-checkbox" type="checkbox" name="Werk" value="Tekst">Tekst
<input class="single-checkbox" type="checkbox" name="Werk" value="Verkoop">Verkoop
<input class="single-checkbox" type="checkbox" name="Werk" value="Overig">Overig
<script type="text/javascript">
$('input[type=checkbox]').change(function(e){
if ($('input[type=checkbox]:checked').length > 2) {
$(this).prop('checked', false)
alert("allowed only 2");
}
})
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<input class="single-checkbox" type="checkbox" name="Werk" value="Zang">Zang
<input class="single-checkbox" type="checkbox" name="Werk" value="Geluid">Geluid
<input class="single-checkbox" type="checkbox" name="Werk" value="DJ">DJ
<input class="single-checkbox" type="checkbox" name="Werk" value="Video">Video<br>
<input class="single-checkbox" type="checkbox" name="Werk" value="Producent">Producent
<input class="single-checkbox" type="checkbox" name="Werk" value="Tekst">Tekst
<input class="single-checkbox" type="checkbox" name="Werk" value="Verkoop">Verkoop
<input class="single-checkbox" type="checkbox" name="Werk" value="Overig">Overig
<script type="text/javascript">
$('input[type=checkbox]').change(function(e){
if ($('input[type=checkbox]:checked').length > 2) {
$(this).prop('checked', false)
alert("allowed only 2");
}
})
</script>
</body>
</html>
Gewijzigd op 02/08/2017 16:12:08 door Jan R
Maar zal het nog eens proberen.
Dat was het toch...
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$( document ).ready(function() {
$('input[type=checkbox]').change(function(e){
if ($('input[type=checkbox]:checked').length > 2) {
$(this).prop('checked', false)
alert("allowed only 2");
}
})
});
$('input[type=checkbox]').change(function(e){
if ($('input[type=checkbox]:checked').length > 2) {
$(this).prop('checked', false)
alert("allowed only 2");
}
})
});
Bedankt voor het meedenken.
Gewijzigd op 02/08/2017 16:18:46 door Hans De Ridder
ready ontbreekt
of achteraan de html is ok een optie