JQuery的禁用时选择所有所有复选框被选中

sickwithit 发表于 Dev

厌倦

我要单击“全选”，它将禁用/淡出其余选项。但是，如果未选中“全选”，则执行代码说明的所有操作。

我究竟做错了什么？

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

VLAZ

好的，disable_checkbox布尔值出了问题-仅当您检查了三个或更多项（尝试检查b，c和d会看到）时，它才是正确的，但此时“全选”实际上并没有全部选择。

这是基于您自己的更优雅的解决方案

$(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>');
        }
    });   
});