2
0
0
您可以掛鉤表格，然後使用它來尋找複選框。我使用第一個檢查的來設(shè)定初始狀態(tài)，但如果沒有，您可能需要調(diào)整它。
可能需要更詳細(xì)一點，只是為了讓解決方案更加清晰。
每一則評論都使其始終處於開啟狀態(tài)。如果您希望以程式設(shè)計方式開啟/關(guān)閉它們，您可以將 'change' 事件變更為 click
let $mainTable = $('#main').find('table tbody');
$mainTable.on('change', 'input[type="checkbox"]', function(event) {
let $me = $(this);
$me.prop("checked", true);
let $parent = $(event.delegateTarget);
let checks = $parent.find('input[type="checkbox"]');
checks.not($me).prop("checked", false);
checks.not($me).toggleClass('btn-danger off', true);
$me.toggleClass("btn-success on", true).toggleClass('btn-danger off', false);
// show the classes when checked/unchecked
//console.log([...this.classList]);
});
// set up the first one as checked to mimic requirement; could be any one
$mainTable.find('input[type="checkbox"]')
.first(':checked)')
.trigger('change');
// now what classes it has we can log those
//console.log([...$mainTable.find('input[type="checkbox"]').first(':checked)')[0].classList]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main" class="content">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th data-property-name="id" class="sorted integer ">
<a href="/admin/?action=list&entity=SchoolYear&sortField=id&sortDirection=ASC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-caret-down"></i> ID
</a>
</th>
<th data-property-name="name" class=" string ">
<a href="/admin/?action=list&entity=SchoolYear&sortField=name&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-sort"></i> Name
</a>
</th>
<th data-property-name="start_date" class=" date ">
<a href="/admin/?action=list&entity=SchoolYear&sortField=start_date&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-sort"></i> Start date
</a>
</th>
<th data-property-name="end_date" class=" date ">
<a href="/admin/?action=list&entity=SchoolYear&sortField=end_date&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-sort"></i> End date
</a>
</th>
<th data-property-name="current" class=" toggle ">
<a href="/admin/?action=list&entity=SchoolYear&sortField=current&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-sort"></i> Current
</a>
</th>
<th>
<span>Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr data-id="4">
<td data-label="ID" class="sorted integer ">
4
</td>
<td data-label="Name" class=" string ">
<span title="SY 2022-2023">SY 2022-2023</span>
</td>
<td data-label="Start date" class=" date ">
<time datetime="2022-07-01T00:00:00-04:00" title="Fri, 01 Jul 2022 00:00:00 -0400">2022-07-01</time>
</td>
<td data-label="End date" class=" date ">
<time datetime="2023-06-30T00:00:00-04:00" title="Fri, 30 Jun 2023 00:00:00 -0400">2023-06-30</time>
</td>
<td data-label="Current" class=" toggle ">
<div class="toggle btn btn-success btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" checked="" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
<div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>
</td>
<td data-label="Actions" class="actions">
<a href="http://localhost:8000/view-program/4">View</a>
<a class="text-primary action-edit" title="" href="/admin/?action=edit&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=4"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=4"
target="_self">Delete</a>
</td>
</tr>
<tr data-id="3">
<td data-label="ID" class="sorted integer ">
3
</td>
<td data-label="Name" class=" string ">
<span title="SY 2021-2022">SY 2021-2022</span>
</td>
<td data-label="Start date" class=" date ">
<time datetime="2021-07-01T00:00:00-04:00" title="Thu, 01 Jul 2021 00:00:00 -0400">2021-07-01</time>
</td>
<td data-label="End date" class=" date ">
<time datetime="2022-06-30T00:00:00-04:00" title="Thu, 30 Jun 2022 00:00:00 -0400">2022-06-30</time>
</td>
<td data-label="Current" class=" toggle ">
<div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
<div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>
</td>
<td data-label="Actions" class="actions">
<a href="http://localhost:8000/view-program/3">View</a>
<a class="text-primary action-edit" title="" href="/admin/?action=edit&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=3"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=3"
target="_self">Delete</a>
</td>
</tr>
<tr data-id="2">
<td data-label="ID" class="sorted integer ">
2
</td>
<td data-label="Name" class=" string ">
<span title="SY 2019-2020">SY 2019-2020</span>
</td>
<td data-label="Start date" class=" date ">
<time datetime="2019-07-01T00:00:00-04:00" title="Mon, 01 Jul 2019 00:00:00 -0400">2019-07-01</time>
</td>
<td data-label="End date" class=" date ">
<time datetime="2020-06-30T00:00:00-04:00" title="Tue, 30 Jun 2020 00:00:00 -0400">2020-06-30</time>
</td>
<td data-label="Current" class=" toggle ">
<div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
<div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>
</td>
<td data-label="Actions" class="actions">
<a href="http://localhost:8000/view-program/2">View</a>
<a class="text-primary action-edit" title="" href="/admin/?action=edit&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=2"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=2"
target="_self">Delete</a>
</td>
</tr>
<tr data-id="1">
<td data-label="ID" class="sorted integer ">
1
</td>
<td data-label="Name" class=" string ">
<span title="SY 2020-2021">SY 2020-2021</span>
</td>
<td data-label="Start date" class=" date ">
<time datetime="2020-07-01T00:00:00-04:00" title="Wed, 01 Jul 2020 00:00:00 -0400">2020-07-01</time>
</td>
<td data-label="End date" class=" date ">
<time datetime="2021-06-30T00:00:00-04:00" title="Wed, 30 Jun 2021 00:00:00 -0400">2021-06-30</time>
</td>
<td data-label="Current" class=" toggle ">
<div class="toggle btn btn-xs btn-danger off" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No" checked="checked">
<div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>
</td>
<td data-label="Actions" class="actions">
<a href="http://localhost:8000/view-program/1">View</a>
<a class="text-primary action-edit" title="" href="/admin/?action=edit&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=1"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=1"
target="_self">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
您可以在變更事件處理程序中操作複選框的類別。這不是選中/取消選中復(fù)選框的方式。
請閱讀此使用 jquery 選取/取消選取複選框？ 和這個 jQuery。如何取消選取除一個（已選?。┲獾乃醒}選框
以下是具體操作方法：
$('#main').find('table .toggle input[type="checkbox"]').change(function() {
$('table .toggle input[type="checkbox"]').prop('checked', false);
$(this).prop('checked', true);
});
這是工作範(fàn)例：https://jsfiddle.net/fL9dknp7/
#
