如何使引导复选框组在选中时关闭另一个组中的所有复选框
Posted
技术标签:
【中文标题】如何使引导复选框组在选中时关闭另一个组中的所有复选框【英文标题】:How to make bootstrap checkbox groups turn off all checkboxes in another group when they become checked 【发布时间】:2021-06-04 14:04:08 【问题描述】:我有 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
从外观上看,代码似乎可以正常工作。当您打开多个“添加”切换,然后选择“重新分配”时,“添加”切换将关闭。然而,有时它只是抓住焦点而不是产生影响。
任何帮助将不胜感激
【问题讨论】:
【参考方案1】:问题是,你必须写两行来选择一个复选框
改变了这一行
$('.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);
您必须有这两行才能根据引导指令使引导程序处于非活动状态
从引导网站: https://getbootstrap.com/docs/3.3/javascript/
【讨论】:
以上是关于如何使引导复选框组在选中时关闭另一个组中的所有复选框的主要内容,如果未能解决你的问题,请参考以下文章