I have a foreach loop that displays survey testimonials. The user is allowed to pick only 5 testimonials. Is there an easy way to disable the rest of the checkboxes once the selected item is 5? I was trying this in jquery but this is not doing anything. Any help or idea would be greatly appreciated. Thanks!!
<script type=“text/javascript”>
$(document).ready(function () {
var checkedcount = 0;
$(‘.chkItems’).click(function () {
if (this.checked)
checkedcount++;
else
checkedcount–;
if (checkedcount >= 5)
$(‘.chkItems:not(:checked)’).attr(“disabled”, “disabled”);
else
$(‘.chkItems:not(:checked)’).removeAttr(“disabled”);
});
});
</script>
Here is the way to do it, although it is in JavaScript, rather than JQuery. If you get to six boxes checked the script disables the remaining boxes. If however you untick a box then you can add another tick to get back to five.
[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Check Boxes Disabled</title>
<script type=“text/javascript”>
<!–
var dmf=null; // global
window.onload=function(){
dmf=document.myForm; // shortcut
for(i=0; i<dmf.elements.length; i++)
{ dmf.elements[i].onchange=getChecked; }
}
// ----------
var boxesChecked=new Number(0), counterObj=null; // global
function getChecked(evt)
{ evt=(evt)?evt : ((window.event)? event : null);
var elem=(evt.target)? evt.target : ((evt.srcElement)? evt.srcElement : null);
boxesChecked=(elem.checked==true)? boxesChecked+1 : boxesChecked-1;
if(boxesChecked<6)
{ // need this to allow user to untick a box and choose another
for(i=0; i<dmf.elements.length; i++)
{ if(dmf.elements[i].checked==false){ dmf.elements[i].disabled=false; }
}
document.getElementById(“B1”).value=boxesChecked; }
else
{ // remove checkmark from current box and adjust totals
elem.checked=false;
boxesChecked=boxesChecked-1;
document.getElementById(“B1”).value=boxesChecked;
// disable unchecked boxes
for(i=0; i<dmf.elements.length; i++)
{ if(dmf.elements[i].checked==false){ dmf.elements[i].disabled=true; }
}
alert(“finished”);
}
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:center; margin:3px 0px; }
p { margin-top:0px; margin-bottom:3px; } #wrap { position:relative; top:0px; left:0px; width:900px; height:500px; text-align:left; margin:0px auto; }
–>
</style>
</head>