Jquery how to count checked and disable checkboxes

Question

I am trying to disable all unchecked checkboxes when there are 5 checked checkboxes.

My code is not working here it is: http://jsfiddle.net/mtYtW/18/

My Jquery:

var countchecked = $('table input[type="checkbox"]').find(":checked").length

    if(countcheckhed > 5) {
        $("table input:checkbox").attr("disabled", true);
    } else {}

My HTML:

<table cellspacing="0" cellpadding="0" width="770px;">
  <tbody><tr style="border: 1px solid green; height: 40px; font-size: 14px;">
    <th>Feature 1</th>
    <th>Feature 2</th>
    <th>Feuture 3</th>
  </tr>

  <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
</tbody></table>

Answer 1

The following should do the trick for your needs:

$("table input[type=checkbox]").click(function(){
var countchecked = $("table input[type=checkbox]:checked").length;

if(countchecked >= 5) 
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",true);
}
else
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",false);
}

});

Example for your needs

(Generic) The following will disable all of your unchecked checkboxes:

$('input[type=checkbox]').not(':checked').attr("disabled","disabled");

Generic Disable Example

Answer 2

$('table input[type="checkbox"]').click(function(){
    var countcheck = $('table input[type="checkbox"]:checked').length;
    if(countcheck > 4) {
        $("table input:checkbox:not(:checked)").attr("disabled", true);
    }else
    {
        $("table input:checkbox").attr("disabled", false);
    }
});

Working Example: http://jsfiddle.net/mtYtW/48/

NOTE: This code will enable the checkboxes if you deselect one of the five!

Answer 3

Your code was close, with a few major issues.

http://jsfiddle.net/mtYtW/37/

$(function() {
    $('table input[type="checkbox"]').change(function() {
        var countchecked = $('table input[type="checkbox"]').filter(":checked").length

        if (countchecked >= 5) {
            $("table input:checkbox").not(":checked").attr("disabled", true);
        }else{
            $("table input:checkbox").attr("disabled", false);
        }
    });
});

The biggest, you had your code only executing onload. You need to execute it any time one of the checkboxes is checked, that is this part:

$('table input[type="checkbox"]').change(function() {

You had a misspelled variable name countcheck did not exist, it was countchecked.

You were using find when you really wanted filter. Find will search in the descendants of the elements in your set, you wanted to filter them.

You had > 5 when you stated you wanted to disable AT 5. So it should be >=.

You were disabling ALL checkboxes, not just the unchecked as you stated, I added .not(":checked").

And finally, I figured you would probably want to re-enable them if one was unchecked, so I added:

}else{
    $("table input:checkbox").attr("disabled", false);
}