![](/img/trans.png)
[英]How to make checkbox checked depending on the checked status of other group of checkboxes?
[英]How to make bootstrap checkbox groups turn off all checkboxes in another group when they become checked
我有 2 個復選框組。 我想允許從任一組中進行多項選擇。 但絕不應該同時選中兩個組中的復選框。 我為復選框使用引導程序,以便它們顯示為切換按鈕。
這是復選框組
<div class="btn-group-sm btn-group-toggle assign-radio-group-div" data-toggle="buttons">
<label class="btn btn-secondary" style="margin: 3px;">
<input class="add-checkbox assignment-grid-button" data-srcorderid="1" type="checkbox">Add
</label>
</div>
<div class="btn-group-sm btn-group-toggle assign-radio-group-div" data-toggle="buttons">
<label class="btn btn-secondary" style="margin: 3px;">
<input class="add-checkbox assignment-grid-button" data-srcorderid="2" type="checkbox">Add
</label>
</div>
<div class="btn-group-sm btn-group-toggle reassign-radio-group-div" data-toggle="buttons">
<label class="btn btn-secondary reassign-radio-group-label" style="margin: 3px;">
<input class="reassign-checkbox assignment-grid-button" data-srcorderid="4" type="checkbox">Reassign
</label>
</div>
<div class="btn-group-sm btn-group-toggle assign-radio-group-div" data-toggle="buttons">
<label class="btn btn-secondary" style="margin: 3px;">
<input class="add-checkbox assignment-grid-button" data-srcorderid="3" type="checkbox">Add
</label>
</div>
<div class="btn-group-sm btn-group-toggle reassign-radio-group-div" data-toggle="buttons">
<label class="btn btn-secondary reassign-radio-group-label" style="margin: 3px;">
<input class="reassign-checkbox assignment-grid-button" data-srcorderid="5" type="checkbox">Reassign
</label>
</div>
<div class="btn-group-sm btn-group-toggle reassign-radio-group-div" data-toggle="buttons">
<label class="btn btn-secondary reassign-radio-group-label" style="margin: 3px;">
<input class="reassign-checkbox assignment-grid-button" data-srcorderid="6" type="checkbox">Reassign
</label>
</div>
<div style="padding-top:30px;">
<div style="float:left;">
<span class="assign-header">Assignment</span>
</div>
<input style="float:left;width:100px" id="bulk-attuid-assignment-input" class="form-control" name="field" type="text">
<button id="bulk-attuid-assignment-button" type="button" class="btn btn-primary bulk-attuid-assignment-class" style="float:left;margin-left: 10px;margin-bottom:4px;">Assign</button>
</div>
這是我一次只允許選擇一個組的嘗試
$(document).ready(function() {
$(document).off('change', '.reassign-checkbox').on('change', '.reassign-checkbox', function(e) {
if ($(this).parent().hasClass('active') == true) {
$('.add-checkbox').parent().removeClass('active');
toggleAssign('show');
}
//if unchecked
if ($(this).hasClass('reassign-checkbox') == true && $(this).parent().hasClass('active') == false) { //if the current changed value is reassign, and the change is an unselect
if ($('.btn-group-toggle.reassign-radio-group-div >.active').length == 0 && $('.btn-group-toggle.assign-radio-group-div >.active').length == 0) { //and it is the last reassign that is unchecked
//hide the assignment field
toggleAssign('hide');
$('#bulk-attuid-assignment-input').val('');
}
}
});
$(document).off('change', '.add-checkbox').on('change', '.add-checkbox', function(e) {
if ($(this).parent().hasClass('active') == true) {
$('.reassign-checkbox').parent().removeClass('active');
toggleAssign('show');
}
//if unchecked
if ($(this).hasClass('add-checkbox') == true && $(this).parent().hasClass('active') == false) { //if the current changed value is add, and the change is an unselect
if ($('.btn-group-toggle.assign-radio-group-div >.active').length == 0 && $('.btn-group-toggle.reassign-radio-group-div >.active').length == 0) { //and it is the last add button that is unchecked
//hide the assignment field
toggleAssign('hide');
$('#bulk-attuid-assignment-input').val('');
}
}
});
});
這是一個JSFiddle
從外觀上看,該代碼似乎正在運行。 當您打開多個“添加”切換,然后 select 一個“重新分配”時,“添加”切換關閉。 然而,有時它只是抓住焦點而不是產生影響。
任何幫助將不勝感激
問題是,你必須寫兩行來選擇一個復選框
改變了這一行
$('.add-checkbox').parent().removeClass('active');
這條線
$('.reassign-checkbox').parent().removeClass('active');
為此(添加了附加行)...
$('.add-checkbox').parent().removeClass('active');
$('.add-checkbox').prop("checked", false);
$('.reassign-checkbox').parent().removeClass('active');
$('.reassign-checkbox').prop("checked", false);
根據引導指令,您必須有兩行才能使引導程序處於非活動狀態
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.