jquery to disable checkbox once the selected item

Question

How would i be able to disable the rest of the checkboxes once the selected items is 5? I was thinking there could be a way to do this in jquery. Here is my code below.

<table>
@{ 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++;
}

Solution:

<script type="text/javascript">
$(document).ready(function () {
    function countchecked() {
        var n = $("input:checked").length;
        if (n >= 5)
            $('.chkItems:not(:checked)').attr("disabled", "disabled");
        else
            $('.chkItems:not(:checked)').removeAttr("disabled");
    }
    $(":checkbox").click(countchecked);
});

Answer 1

just thinking maybe make an array to track the number of checked boxes the something like enabled=false if(array.length==5 && self!=checked)

that might work if you write a little javascript I am not familiar enough with jQuery to say whether there is some easy built in way to do it

Answer 2

Below is an example (refined as suggested). You may want to refine the selectors.

<script type="text/javascript">
    jQuery(function() {
        jQuery("input:checkbox.chkItems").change(
            function() {
                var p = $(this).parent();
                var e = p.find("input:checked").length >= 5;
                p.find("input:not(:checked)").attr('disabled', e ? 'disabled' : '');
            }
        );
    });
</script>

<div id="checkbox-group">
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
</div>

Answer 3

Here is my proposed solution:

 var checkedcount=0;
  $("input.chkItems").change(function(){
    if(this.checked) checkedcount++; else checkedcount--;
    if(checkedcount>=5)  $("input.chkItems:not(:checked)").attr("disabled", "disabled");
    else $("input.chkItems:not(:checked)").removeAttr("disabled");
  });

Working demo at: http://jsbin.com/etici4

EDITED: changed the event to "onchange" as suggested