Disable checkboxes once the count is 5

Hi,

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>

@using (Html.BeginForm())
{
<table width=“100%” cellpadding=“0” cellspacing=“0”
rules=“all”>
<thead>
<tr>
<td align=“center” style=“padding: 2px 0 2px 2px;”>Select</td>
<td align=“center” style=“padding: 2px 0 2px 2px;”>First Name</td>
<td align=“center” style=“padding: 2px 0 2px 2px;”>Last Name</td>
<td align=“center” style=“padding: 2px 0 2px 2px;”>Testimonial</td>
</tr>
</thead>
@{ var i = 0;
}
@foreach (var testimonials in Model.Testimonials)
{
<tr>
<td style=“padding: 2px 0 2px 2px;”>
@Html.CheckBox(“Testimonials[” + i.ToString() + “].DisplayTestimonials”, testimonials.DisplayTestimonials.Value, new { @class = “chkItems” })
@Html.Hidden(“Testimonials[” + i.ToString() + “].ResponseId”, testimonials.ResponseId.ToString())
</td>
<td style=“padding: 2px 0 2px 2px;”>@Html.TextBox(“Testimonials[” + i.ToString() + “].FirstName”, testimonials.FirstName, new { @readonly = “readonly”, @class = “TextBoxAsLabel” })</td>
<td style=“padding: 2px 0 2px 2px;”>@Html.TextBox(“Testimonials[” + i.ToString() + “].LastName”, testimonials.LastName, new { @readonly = “readonly”, @class = “TextBoxAsLabel” })</td>
<td style=“padding: 2px 0 2px 2px;”>@Html.TextBox(“Testimonials[” + i.ToString() + “].Question5Answer”, testimonials.Question5Answer.ToString(), new { @readonly = “readonly”, @class = “TextBoxAsLabel” })</td>
</tr>
i++;
}
</table>
}

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>

<body>

<div id=“wrap”>
<form name=“myForm”>
<p>1: <input type=“checkbox” name=“C1” value=“ON”></p>
<p>2: <input type=“checkbox” name=“C2” value=“ON”></p>
<p>3: <input type=“checkbox” name=“C3” value=“ON”></p>
<p>4: <input type=“checkbox” name=“C4” value=“ON”></p>
<p>5: <input type=“checkbox” name=“C5” value=“ON”></p>
<p>6: <input type=“checkbox” name=“C6” value=“ON”></p>
<p>7: <input type=“checkbox” name=“C7” value=“ON”></p>
<p>8: <input type=“checkbox” name=“C8” value=“ON”></p>
</form>
<p><input id=“B1” type=“text” name=“B1” value=“0” size=“5”>
<!-- end form –>
</div>
<!-- end wrap –>

</body>

</html>

I notice that the onchange handler is not working properly in IE. This should be changed to onclick to fix the problem as follows

window.onload=function(){
dmf=document.myForm; // shortcut
for(i=0; i<dmf.elements.length; i++)
{ dmf.elements[i].onclick=getChecked; }
}