根据选中的复选框启用和禁用两个不同的按钮 - JQuery

Question

我有一个表格，但我需要添加一些功能，以便如果您只选择一个选项，则单个操作菜单应该处于活动状态，而顶部操作菜单应该是灰色的。目前，如果您选择一个选项，它将禁用表格操作菜单并启用顶部操作菜单。有没有办法让它工作，这样如果只选择一个记录，顶部菜单就会被禁用。目前它是如何工作的：全选 - 禁用表格按钮，启用顶部按钮。如果您取消选择全选，则该按钮将被禁用如果您从表格中选择 2 个或更多，则表格按钮将被禁用，而顶部菜单将被启用。查询// Checks individual checkboxes and displays the count    $(".individual").on("change", determineActionButtonAvailability);    $(".selectall").click(function () {        $(".individual").prop("checked", $(this).prop("checked"));        determineActionButtonAvailability();    });    //Disable Top Verify Button if two or more checkboxes are selected.    $('.verify-btn').prop('disabled', true);    $(".individual").on("click", function () {        if ($(".individual:checked").length > 1) {            $('.verify-btn').prop('disabled', false);        }        else {            $('.verify-btn').prop('disabled', true);        }    });    //Disable Action Button in the columns when more than one checkbox is selected    $('.table-btn').prop('disabled', false);    $(".individual").on("click", function () {        if ($(".individual:checked").length > 1) {            $('.table-btn').prop('disabled', false);            $(".verify-btn").prop('disabled', true);        }        else {            $('.table-btn').prop('disabled', false);            $(".verify-btn").prop('disabled', false);        }    });    // When one or more works are selected, will enable the top action menu.    // Will disable when none selected.    function determineActionButtonAvailability()    {        if ($(".individual:checked").length > 0)        {            $(".records-selected").show();            $("#selected").text($(".individual:checked").length);            $("#total").text($(".individual").length);            $(".verify-btn").prop('disabled', false);            $('.table-btn').prop('disabled', true);        }        else {            $(".records-selected").hide();            $(".verify-btn").prop('disabled', true);            $('.table-btn').prop('disabled', false);        }    }

Answer 1

所以我设法让它工作，经过多次挠头，我将计数更改为 1，这解决了问题。全面测试它现在按预期执行。

    // Checks individual checkboxes and displays the count

    $(".individual").on("change", determineActionButtonAvailability);

    $(".selectall").click(function () {

        $(".individual").prop("checked", $(this).prop("checked"));

        determineActionButtonAvailability();

    });

    //Disable Top Verify Button if two or more checkboxes are selected.

    $('.verify-btn').prop('disabled', true);

    $(".individual").on("click", function () {

        if ($(".individual:checked").length > 1) {

            $('.verify-btn').prop('disabled', false);

        }

        else {

            $('.verify-btn').prop('disabled', true);

        }

    });

    //Disable Action Button in the columns when more than one checkbox is selected

    $('.table-btn').prop('disabled', false);

    $(".individual").on("click", function () {

        if ($(".individual:checked").length > 1) {

            $('.table-btn').prop('disabled', true);

        }

        else {

            $('.table-btn').prop('disabled', false);

        }

    });

    // When one or more works are selected, will enable the top action menu.

    // Will disable when none selected.

    function determineActionButtonAvailability() {

        if ($(".individual:checked").length > 1) {

            $(".records-selected").show();

            $("#selected").text($(".individual:checked").length);

            $("#total").text($(".individual").length);

            $(".verify-btn").prop('disabled', false);

            $(".table-btn").prop('disabled', true);

        }

        else {

            $(".records-selected").hide();

            $(".verify-btn").prop('disabled', true);

            $(".table-btn").prop('disabled', false);

        }

    }