JavaScript：根据唯一的CLASS限制选中的允许框的数量

Question

I have this Java-Script code

var maxCheckedCount = 3;
var CLASS = 'Woops! Too many selected!';

    jQuery('input[type=checkbox]').click(function(){
        var n = jQuery('input:checked').length;
        if(n>=maxCheckedCount){
            jQuery(this).prop('checked',false);
            alert(maxCheckedAlertMessage);
        }
    });

and then here is HTML check-boxes list.

<input type="checkbox">1
<br>
<input type="checkbox">2
<br>
<input type="checkbox">3
<br>
<input type="checkbox">4
<br>
<input type="checkbox">5
<br>


<ul   CLASS="options-34-list">
<li>
<input type="checkbox">6
</li>
<input type="checkbox">7
<li>
<input type="checkbox">8
</li>
<li>
<input type="checkbox">9
</li>
<li>
<input type="checkbox">10
</li>
</ul>

How can i only apply the JavaScript of limiting the allowed number of boxes based on the CLASS CLASS="options-34-list" of the checkbox not to all list.

Answer 1

Here's my version!

$.fn.maxSelectedCheckboxes = maxSelectedCheckboxes;

function maxSelectedCheckboxes(maxSelected) {
    var $targets = this;
    $targets.on('click', function() {
        var $checked = $targets.filter(':checked');
        if ($checked.length > maxSelected) {
            $checked.not(this).first().removeAttr('checked');
        }
    });
};

Fiddle: http://jsfiddle.net/S8ZTA/

It's nice because it can be used on any selector applied across a collection of checkboxes:

$('#options-34-list input[type="checkbox"]').maxSelectedCheckboxes(3);

Answer 2

Use .find() to search for nodes inside the descendants of a given node.

Number of checked items found inside the list #options-34-list :

$('#options-34-list').find('input:checked').length

Answer 3

The id attribute must be unique, you can use a class instead.

HTML:

<input type="checkbox">1
<br>
<input type="checkbox">2
<br>
<input type="checkbox">3
<br>
<input type="checkbox">4
<br>
<input type="checkbox">5
<br>
<input type="checkbox" class="options-34-list">6
<br>
<input type="checkbox" class="options-34-list">7
<br>
<input type="checkbox" class="options-34-list">8
<br>
<input type="checkbox" class="options-34-list">9
<br>
<input type="checkbox" class="options-34-list">10
<br>

JS:

jQuery('input[type=checkbox]').click(function () {
    var n = jQuery('.options-34-list:checked').length;
    if (n > maxCheckedCount) {
        jQuery(this).prop('checked', false);
        alert(maxCheckedAlertMessage);
    }
});

Demo: http://jsfiddle.net/IrvinDominin/ATbvM/