jquery to disable checkbox once the selected item is 5

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

Ariel Popovsky · Accepted Answer · 2011-02-25 20:02:15Z

1

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

edited Feb 25, 2011 at 20:02

answered Feb 25, 2011 at 14:39

Ariel Popovsky

4,9052 gold badges32 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bladerunner Over a year ago

Hi Ariel, This is what i have from your answer. But the checkboxes don't disable once the count goes over 5.<script type="text/javascript"> $(document).ready(function () { var checkedcount = 0; $("input.chkItems").click(function () { if (this.checked) checkedcount++; else checkedcount--; if (checkedcount >= 5) $("input.chkItems:not(:checked)").attr("disabled", "disabled"); else $("input.chkItems:not(:checked)").removeAttr("disabled"); }); }); </script>

Jeff Parker Over a year ago

To make it accessible, I'd recommend putting the event on change instead of on click. If someone is changing those boxes using a device other than the mouse, the limit may not kick in.

Ariel Popovsky Over a year ago

Maybe is a problem with the jquery selectors, in the sample I made I used a more generic selector. Try opening the browser console and make sure $("input.chkItems") returns the array of checkboxes in the page. Also check the :checked and :not(:checked) variants.

bladerunner Over a year ago

okay, i just tried doing $(document).ready(function () { var checkedcount = 0; $('.chkItems').change(function () {alert('Handler for change'); }); }); When i check the checkbox, the alert message comes up. It means the selector (.chkItems) work.

Jeff Parker · Accepted Answer · 2011-02-25 14:51:05Z

1

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>

edited Feb 25, 2011 at 14:51

answered Feb 25, 2011 at 14:34

Jeff Parker

7,5671 gold badge24 silver badges25 bronze badges

2 Comments

Richard Dalton Over a year ago

Looks good, but you'd really want to bind the change event via jQuery rather than the onchange attribute on each checkbox.

Jeff Parker Over a year ago

A good suggestion ... it also saves me from from defining the selector in multiple places, which is a bit evil. Incorporated! :)

ScottC · Accepted Answer · 2011-02-25 14:32:17Z

0

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

answered Feb 25, 2011 at 14:32

ScottC

4628 silver badges25 bronze badges

Collectives™ on Stack Overflow

jquery to disable checkbox once the selected item is 5

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related