javascript - 轻松限制选中的复选框jquery ui

Question

只是想限制复选框的数量，但实际上我的代码在 lengh > 3 时禁止所有复选框，有什么问题..

http://jsfiddle.net/mbAwC/11/

$('.limit :checkbox').change(function () {
    var $cs=$(this).closest('.limit').find(':checkbox:checked');
    if ($cs.length > 3) {
        this.checked=false;$('.limit :checkbox').removeAttr('checked').button( "refresh" );
    }
});   

问候杰斯

Answer 1

只需删除removeAttr('checked')

$(function() {
    $(".limit").buttonset();
    $('.limit :checkbox').change(function () {
        var $cs=$(this).closest('.limit').find(':checkbox:checked');
        if ($cs.length > 3) {
            this.checked=false;
            $('.limit :checkbox').button( "refresh" );
        }
    });
});

JSFiddle

Answer 2

$('.limit :checkbox').removeAttr('checked')是错的。它将取消选中您的所有复选框。

也许你的意思是$(this).removeAttr('checked')（但你已经有了this.checked=false）？

Answer 3

将检查设置为false，然后调用button('refresh')：

$(this).prop('checked', false).button('refresh');

这是一个小提琴

Answer 4

试试这个方法：

$(function () {
    $(".limit").buttonset();

    var max = 3;
    var checkboxes = $('input[type="checkbox"]', '.limit');

    checkboxes.change(function () {
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max).button('refresh');
    });
});

演示：http: //jsfiddle.net/mbAwC/21/