max 2 vinkjes bij checkboxes werkt niet (wel op Fiddle)

Door Hans De Ridder op 02-08-2017 15:45

1.379 views

Ik wil een mogelijkheid hebben om max. 2 hokjes aan te vinken bij checkboxen voor een form.
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?


<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>

- Ariën -

02-08-2017 16:03

Je 'ready'-functie in jQuery mis je.

Jan R

02-08-2017 16:09 gewijzigd op 02-08-2017 16:12

Als ik dit er van maak werkt het


<!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>

Hans De Ridder

02-08-2017 16:09 gewijzigd op 02-08-2017 16:18

Dat had ik ook al gedaan....
Maar zal het nog eens proberen.
Dat was het toch...


$( document ).ready(function() {
$('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.

Jan R

02-08-2017 18:16

Zoals Ariën al schreef.
ready ontbreekt
of achteraan de html is ok een optie

Reageren

Inloggen om te reageren