Включить и отключить две разные кнопки на основе выбранных флажков - JQuery

Question

У меня есть таблица, но мне нужно добавить некоторые функциональные возможности, чтобы при выборе только одной опции отдельное меню действий было активным, а главное меню действий было серым. В настоящее время, если вы выберете одну опцию, она отключит меню действий таблицы и включит меню действий сверху. Есть ли способ заставить его работать так, чтобы, если выбрана только одна запись, верхнее меню было отключено.

Как это работает в настоящее время:

Выбрать все - кнопки таблицы отключены, а верхняя кнопка включена. Если вы отмените выбор Выбрать все, то эта кнопка будет отключена

Если вы выберете 2 или более из таблицы, то кнопки таблицы будут отключены, а верхнее меню включено.

1010 * JQuery *

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

Таблица

 <table class="table table-striped table-hover dataTable admin-form theme-primary newsongsTable" width="100" role="grid">
    <thead id="tableHeader">
    <tr>
        <th class="bg-white">Select</th>

        <th class="sorting text-left hidden-xs hidden-sm @Html.SortTitleItem("UniqueCode", Model.PagingInfo.SortPropertyName, Model.PagingInfo.SortAscending)">
            <a href="@Url.Action("NewSongs", "SongsManagement", new
                     {
                         workcode = workCode,
                         page = 1,
                         take = Model.PagingInfo.Take,
                         sortBy = "UniqueCode",
                         sortAsc = Model.PagingInfo.SortPropertyName != "UniqueCode" || !Model.PagingInfo.SortAscending
                     })" data-container="body" data-toggle="tooltip" title="Sort by Date">Song ID</a>
        </th>

        <th class="sorting text-left @Html.SortTitleItem("Title", Model.PagingInfo.SortPropertyName, Model.PagingInfo.SortAscending)">
            <a href="@Url.Action("NewSongs", "SongsManagement", new
                     {
                         workcode = workCode,
                         page = 1,
                         take = Model.PagingInfo.Take,
                         sortBy = "Title",
                         sortAsc = Model.PagingInfo.SortPropertyName != "Title" || !Model.PagingInfo.SortAscending
                     })" data-container="body" data-toggle="tooltip" title="Sort by Song Title">Song Title</a>
        </th>
        <th class="sorting text-left hidden-xs hidden-sm @Html.SortTitleItem("CreatedDate", Model.PagingInfo.SortPropertyName, Model.PagingInfo.SortAscending)">
            <a href="@Url.Action("NewSongs", "SongsManagement", new
                     {
                         workcode = workCode,
                         page = 1,
                         take = Model.PagingInfo.Take,
                         sortBy = "CreatedDate",
                         sortAsc = Model.PagingInfo.SortPropertyName != "CreatedDate" || !Model.PagingInfo.SortAscending
                     })" data-container="body" data-toggle="tooltip" title="Sort by Created Date">Created Date</a>
        </th>
        <th class="sorting text-left hidden-xs @Html.SortTitleItem("ArtistAccount.AccountName", Model.PagingInfo.SortPropertyName, Model.PagingInfo.SortAscending)">
            <a href="@Url.Action("NewSongs", "SongsManagement", new
                     {
                         workcode = workCode,
                         page = 1,
                         take = Model.PagingInfo.Take,
                         sortBy = "ArtistAccount.AccountName",
                         sortAsc = Model.PagingInfo.SortPropertyName != "ArtistAccount.AccountName" || !Model.PagingInfo.SortAscending
                     })" data-container="body" data-toggle="tooltip" title="Sort by Account Name">Account Name</a>
        </th>
        <th class="sorting text-left hidden-xs hidden-sm @Html.SortTitleItem("Catalogue.Name", Model.PagingInfo.SortPropertyName, Model.PagingInfo.SortAscending)">
            <a href="@Url.Action("NewSongs", "SongsManagement", new
                     {
                         workcode = workCode,
                         page = 1,
                         take = Model.PagingInfo.Take,
                         sortBy = "Catalogue.Name",
                         sortAsc = Model.PagingInfo.SortPropertyName != "Catalogue.Name" || !Model.PagingInfo.SortAscending
                     })" data-container="body" data-toggle="tooltip" title="Sort by Catalogue Name">Catalogue Name</a>
        </th>
        <th class="bg-white th-10 text-center">Action</th>
    </tr>
    </thead>
    <tbody>
    @foreach (var t in Model.Songs)
    {
        <tr data-id="@t.ID"
            data-isdeleted="@t.IsDeleted"
            data-rowversion="@t.RowVersion"
            data-uniqueworkid="@t.WorkUniqueCode"
            data-songtitle="@t.SongTitle"
            data-created-date="@t.CreatedDate"
            date-accountname="@t.AccountName"
            data-cataloguename="@t.CatalogueName">

            <td><label><input type="checkbox" class="individual" data-checkbox="checkbox"/></label></td>
            <td class="hidden-xs hidden-sm">@t.WorkUniqueCode</td>
            <td>@t.SongTitle</td>
            <td class="hidden-xs hidden-sm">@t.CreatedDate</td>
            <td class="hidden-xs">@t.AccountName</td>
            <td class="hidden-xs hidden-sm">@t.CatalogueName</td>
            <td class="updateTableRow text-center">
                <div class="dropdownContainer btn-group text-right">
                    <button type="button" class="btn btn-primary br2 btn-xs fs12 dropdown-toggle table-btn" id="table-actionbtn" data-toggle="dropdown" aria-expanded="false">
                        Action
                        <span class="caret ml5"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li>
                            <a href="#" data-container="body" data-toggle="tooltip" title="Verify Song" data-rowhover="activateTableRow">Verify Song</a>
                        </li>
                        <li>
                            <a href="#" data-container="body" data-toggle="tooltip" title="Reject Song" data-rowhover="deleteTableRow">Reject Song</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
        //tableRowIndex++;
    }
    </tbody>
</table>

Если кто-нибудь сможет дать мне какой-нибудь совет, так как он поставил меня в тупик.

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