JavaScript:基于唯一类限制选中的允许框的数量

Question

我有这个 Java 脚本代码

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

然后这里是 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>


<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>

我如何才能仅将基于复选框的 CLASS CLASS="options-34-list" 限制允许的框数的 JavaScript 应用于所有列表而不是所有列表。

Answer 1

这是我的版本!

$.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/

这很好，因为它可以用在应用于复选框集合的任何选择器上:

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