disable checkboxes once the count is 5

**DmitryS** · Feb 25, 2011 22:38

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

**AllanP** · Mar 7, 2011 00:30

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.

Code :

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

**AllanP** · Mar 7, 2011 01:07

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

User Tag List

Thread: disable checkboxes once the count is 5

Thread Tools

Display

disable checkboxes once the count is 5

Bookmarks

Bookmarks

Posting Permissions