我有一个表格，但我需要添加一些功能，以便如果您只选择一个选项，则单个操作菜单应该处于事件状态，并且顶部操作菜单应该显示为灰色。目前，如果您选择一个选项，它会禁用表格操作菜单并启用顶部操作菜单。有没有一种方法可以让它工作，这样如果只选择了一条记录，顶部菜单就会被禁用。
目前的运作方式:
全选 - 禁用表格按钮并启用顶部按钮。如果您取消选择“全选”，则该按钮将被禁用
如果您从表格中选择 2 个或更多，则表格按钮将被禁用并启用顶部菜单。
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>
如果有人能给我一些建议，因为我很难过。
最佳答案
所以我设法让它工作了，经过多次挠头之后，我将计数更改为 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);
}
}
关于javascript - 基于选中的复选框启用和禁用两个不同的按钮 - JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50268754/