Limit Checkbox amount

I have 20 Checkboxes. I need to disable 16 Checkboxes, if 4 checkboxes are selected.

I tryed this begann with this jquery code

    $("input[type=checkbox][name=cate]:checked").each(

    function()
    {
    }

);

What i need is if a user selects 4 checkboxes then all other checkboxes should be disabled.

Answers


$("input[type=checkbox][name=cate]").click(function() {

    var bol = $("input[type=checkbox][name=cate]:checked").length >= 4;     
    $("input[type=checkbox][name=cate]").not(":checked").attr("disabled",bol);

});

demo


Providing a parent element with an id of limit_checkbox will help speed up the selection, caching the query reduces the amount of DOM interaction which is slow.

Used "change" instead of click otherwise the code could be circumvented by using the keyboard, also using live instead of bind which is a lot quicker.

// Cache jQuery selection
var $checkboxes_to_limit = $("#limit_checkbox").find("input:checkbox[name=cate]");
$checkboxes_to_limit.live("change", function() {
    if($checkboxes_to_limit.filter(":checked").length >= 4) {
        $checkboxes_to_limit.not(":checked").attr("disabled","disabled");
    }
    else {
        $checkboxes_to_limit.removeAttr("disabled");
    }
});

Here is a working example. May be it would be usefull for some people ;-)

$.fn.limit = function(n) {
 var self = this;
 this.click(function(){
   (self.filter(":checked").length==n)?
     self.not(":checked").attr("disabled",true).addClass("alt"):
     self.not(":checked").attr("disabled",false).removeClass("alt");
 });
}

$("input:checkbox").limit(3);

}

I found a more flexible solution that lets you vary the limit for different sets of checkboxes.

// Assign a class of limit_checkbox to the containing DIV and
// set a data-limit attribute with your limit. 
$(".limit_checkbox").on("change", function()
{
  var limit = $(this).attr('data-limit'),
      checkboxes = $(this).find("input:checkbox"),
      valid = checkboxes.filter(":checked").length >= limit;

    checkboxes.not(":checked").attr("disabled", valid);
});

The only problem I found was that if your validation fails and returns the page with the input it will let the user select one extra box before disabling the rest. The way I solved this was to count how many were checked and disable the rest on the server before sending the page with input back.

hope it helps Cheers!


This does not DISABLE the remaining checkboxes, but prevent from selecting more. I will share anyway, here it is:

.aspx

<asp:CheckBoxList id="chkList" runat="server" RepeatLayout="Flow" />

.js

$(document).ready(function () {
    LimitCheckboxes('input[name*=chkList]', 3);
}



function LimitCheckboxes(control, max) {

    $(control).live('click', function () {

        //Count the Total Selection in CheckBoxList 
        var totCount = 1;
        $(this).siblings().each(function () {
            if ($(this).attr("checked")) { totCount++; }
        });

        //if number of selected item is greater than the max, dont select.
        if (totCount > max) { return false; }
        return true;
    });

}

PS: Make sure you use the RepeatLayout="Flow" to get rid of the annoying table format.


My solution:

// Function to check and disable checkbox
    function limit_checked( element, size ) {
      var bol = $( element + ':checked').length >= size;
      $(element).not(':checked').attr('disabled',bol);
    }

    // List of checkbox groups to check + number of checked alowed
    var check_elements = [
      { id: '.group1 input[type=checkbox]', size: 2 },
      { id: '.group2 input[type=checkbox]', size: 3 },
    ];

    // Run function for each group in list
    $(check_elements).each( function(index, element) {
      // Limit checked on window load
      $(window).load( function() {
        limit_checked( element.id, element.size );
      })

      // Limit checked on click
      $(element.id).click(function() {
        limit_checked( element.id, element.size );
      });
    });

Need Your Help

Python get all permutations of numbers

python combinations

I'm trying to display all possible permutations of a list of numbers, for example if I have 334 I want to get:

How do I convert a double into a string in C++?

c++ string double

I need to store a double as a string. I know I can use printf if I wanted to display it, but I just want to store it in a string variable so that I can store it in a map later (as the value, not ...