Question

我想点击全选，它将禁用/淡出其余选项。但是，如果选中all并未进行检查，则执行代码所述的任何操作。

我做错了什么？

$(function() {
    $("input[type=checkbox]").change(function() {
        var count_checkbox = $("input[type=checkbox]:checked").length;
        var disable_checkbox = $("input[type=checkbox]:checked").length >= 3;  

        if ($("input.category_all:checked").is(':checked')) {
           $("input[type=checkbox]").not(":checked").attr("disabled",disable_checkbox);
        }

        $("input[type=checkbox]").not(":checked").attr("disabled",disable_checkbox);

        if(count_checkbox > 0){
            $('#checkbox_counter').replaceWith('<div id="checkbox_counter">'+count_checkbox+' Selected</div>');
        }else{
            $('#checkbox_counter').replaceWith('<div id="checkbox_counter">Select...</div>');
        }
    });   
});

http://jsfiddle.net/k6R7g/2/

Answer 1

出现问题的是disable_checkbox布尔值 - 只有当你检查三个或更多项目时才会这样（尝试检查b，c和d，你会看到）但是你的＆＃34;选择全部＆＃34;实际上并没有在那时选择所有。

这是一个基于您自己的

的更优雅的解决方案

$(function() {
    $("input[type=checkbox]").change(function() {
        var count_checkbox_all = $("input[type=checkbox]").not(".category_all").length;
        var count_checkbox_checked = $("input[type=checkbox]:checked").not(".category_all").length;

        if ($(this).hasClass("category_all")) { 
            //if we clicked on "Select All"
            var is_checked = $(".category_all").is(":checked");
            //check/uncheck everything and disable/enable the rest of the tickboxes based on the state of this one
            $(".categories_list").prop("checked", is_checked).attr("disabled",  is_checked);

            //also update the count of checked items
            count_checkbox_checked = $("input[type=checkbox]:checked").not(".category_all").length;
        }

        if (count_checkbox_checked == count_checkbox_all) { //if all have been checked
            //make sure they are disabled and that "Select All" is checked as well
            $(".categories_list").attr("disabled",  true);
            $(".category_all").prop("checked", true);
        }

        if(count_checkbox > 0){
            $('#checkbox_counter').replaceWith('<div id="checkbox_counter">'+count_checkbox+' Selected</div>');
        }else{
            $('#checkbox_counter').replaceWith('<div id="checkbox_counter">Select...</div>');
        }
    });   
});

您可以在此处看到它：JS Fiddle

如果您点击＆＃34;全选＆＃34;，则会检查所有框（因为之后您将对已检查的框进行计数）然后禁用它们。如果你取消它，那么它会清除对框的检查并启用它们。计数在之后执行，并排除＆＃34;全选＆＃34;复选框，因为你在概念上只有4个选项 - 计算第五个选项没有多大意义

编辑根据@Tyblitz的评论，现在当您单独选择所有复选框时，您将获得点击全选的效果

选中all all时，JQuery禁用所有复选框

1 个答案: