[英]How to make bootstrap checkbox groups turn off all checkboxes in another group when they become checked
I have 2 checkbox groups.我有 2 个复选框组。 I want to allow multiple selections from either group.
我想允许从任一组中进行多项选择。 But there should never be checkboxes from both groups selected at the same time.
但绝不应该同时选中两个组中的复选框。 I am using bootstrap for the checkboxes so that they appear as a toggle button.
我为复选框使用引导程序,以便它们显示为切换按钮。
Here are the checkbox groups这是复选框组
<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>
and here is my attempt to allow for only one group to be selected at a time这是我一次只允许选择一个组的尝试
$(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('');
}
}
});
});
here is a JSFiddle这是一个JSFiddle
From immediate appearances the code seems to be working.从外观上看,该代码似乎正在运行。 When you have multiple "Add" toggles turned on, then select a "Reassign", the "Add" toggles turn off.
当您打开多个“添加”切换,然后 select 一个“重新分配”时,“添加”切换关闭。 However, sometimes it only grabs focus instead of having an impact.
然而,有时它只是抓住焦点而不是产生影响。
Any help would be so much appreciated任何帮助将不胜感激
The issue was, you have to write two lines for selecting a checkbox问题是,你必须写两行来选择一个复选框
changed this line改变了这一行
$('.add-checkbox').parent().removeClass('active');
and this line这条线
$('.reassign-checkbox').parent().removeClass('active');
to this (added the additional line)...为此(添加了附加行)...
$('.add-checkbox').parent().removeClass('active');
$('.add-checkbox').prop("checked", false);
$('.reassign-checkbox').parent().removeClass('active');
$('.reassign-checkbox').prop("checked", false);
You must have both lines for making a bootstrap inactive per the bootstrap instructions根据引导指令,您必须有两行才能使引导程序处于非活动状态
From the bootstrap website: https://getbootstrap.com/docs/3.3/javascript/从引导网站: https://getbootstrap.com/docs/3.3/javascript/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.