CODEWITHSUNDEEP
jquery
Rails beginner
Rails beginner

Reputation: 14504

Jquery how to count checked and disable checkboxes

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>

Upvotes: 8

Views: 19806

Answers (7)

Kevin Bowersox
Kevin Bowersox

Reputation: 94479

$('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!

Upvotes: 3

Rion Williams
Rion Williams

Reputation: 76557

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

Upvotes: 7

Chandu
Chandu

Reputation: 82913

I guess you want to disable the rest of the check boxes once the checked checkboxes count gets more than 5.If that is the case try this:

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

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

Working example: http://jsfiddle.net/mtYtW/30/

If you want to disable the checkboxes on the page load and verify if there are more than 5 checkboxes that are checked then try this:

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

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

Upvotes: 0

Robert
Robert

Reputation: 8767

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

    }
});

Working example: http://jsfiddle.net/Re5uy/6/

Upvotes: 0

user188654
user188654

Reputation: 

$(':checkbox').bind('click', function(){
    if($(':checkbox:checked').length >= 5) {
        $(':checkbox').not(':checked').prop('disabled', true);
    } else {
        $(':checkbox').not(':checked').prop('disabled', false);
    }
});

Note that prop is jQuery 1.6 exclusive. In case of jQuery < 1.6 use attr.

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

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

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

Take a look at this

http://jsfiddle.net/mtYtW/33/

Upvotes: 0

Related Questions