如何在选中若干复选框后禁用复选框？
在前端开发中，可以通过以下步骤来实现在选中若干复选框后禁用复选框：
- 首先，为每个复选框添加一个事件监听器，以便在复选框状态改变时触发相应的函数。
- 在事件处理函数中，可以使用JavaScript来获取选中的复选框元素。可以通过遍历所有复选框元素，检查每个复选框的选中状态，然后将选中的复选框存储在一个数组中。
- 接下来，可以使用JavaScript的
setAttribute方法来设置选中的复选框的disabled属性为true，从而禁用这些复选框。同样，也可以使用removeAttribute方法来移除disabled属性，以启用复选框。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>禁用复选框示例</title>
<script>
function disableCheckboxes() {
// 获取所有复选框元素
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var selectedCheckboxes = [];
// 遍历复选框元素，检查选中状态
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedCheckboxes.push(checkboxes[i]);
}
}
// 禁用选中的复选框
for (var i = 0; i < selectedCheckboxes.length; i++) {
selectedCheckboxes[i].setAttribute('disabled', 'true');
}
}
</script>
</head>
<body>
<h1>禁用复选框示例</h1>
<input type="checkbox" name="option1" value="option1"> 选项1<br>
<input type="checkbox" name="option2" value="option2"> 选项2<br>
<input type="checkbox" name="option3" value="option3"> 选项3<br>
<input type="checkbox" name="option4" value="option4"> 选项4<br>
<br>
<button onclick="disableCheckboxes()">禁用选中的复选框</button>
</body>
</html>在上述示例中，当点击"禁用选中的复选框"按钮时，会调用disableCheckboxes函数。该函数会获取所有复选框元素，并检查选中状态。然后，它会禁用选中的复选框，通过设置disabled属性为true。
请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。
腾讯云相关产品和产品介绍链接地址：
相关·内容
4回答
我正在解决以下情况-我在表中的数据库数据和这些数据我在HTML页面中选中或取消选中的复选框。
我想知道程序，如何做，如果我已经选中了复选框，那么如何禁用用户未选中此复选框。
以某种方式存在，怎么办？
非常感谢，M。
浏览 0提问于2011-06-21得票数 3
回答已采纳
正在尝试选中所有复选框并需要限制禁用的复选框和仅选中启用的复选框，但所有复选框都处于选中状态(所有启用和禁用的复选框都处于选中状态)。请推荐我，
checkuncheckall() {
this.isChecked = !this.isChecked;
this.displaying_results.forEach(i => {
this.persons[i].checked = this.isChecked;
});
}
浏览 46提问于2021-06-11得票数 1
3回答
以下代码基本上用于删除选中的输入复选框。
function deleteRow() {
$('div.name').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked')) {
$(item).remove();
}
});
});
}
<div class="name"&
浏览 0提问于2020-07-04得票数 0
回答已采纳
3回答
简单地说，我在网格视图中有一系列带有复选框的视频。点击submit后，会有一个回发，它们会转到同一页面上的另一个网格视图。我的问题很简单，如何取消选中用户首次选择视频的初始复选框？每次用户在选择几个视频后点击提交按钮，框都会保持选中状态，如果你选择了更多的视频并按回车键，而没有意识到其他视频仍然被选中，那么你现在就有了重复的条目。
很抱歉，我估计这是一个简单的答案，但我所做的所有研究都涉及到更复杂的问题。
提前感谢！
编辑:很抱歉，我应该提到这是在C# ASP.NET中。这是有问题的复选框：
<asp:CheckBox ID="cbAdd" runat="serv
浏览 1提问于2012-03-02得票数 1
回答已采纳
2回答
我希望仅当选中另一个复选框时才启用(默认情况下)禁用复选框。这允许我选中新启用的复选框。捕获是在表单提交时，如果选中了另一个复选框，则应保持启用状态。
<input type="checkbox" class="checkbox1" id="checkbox1" name="vehicle" value="Bike">I am enabled and must be clicked<br>
<input type="checkbox" class="checkb
浏览 0提问于2013-03-12得票数 0
回答已采纳
如何在angular js中为ng-disabled设置多个值？
我的问题是用下面的JS小提琴解释的：
<div ng-app>
<div ng-controller="myCnt">
<h3>A ->> <input type="checkbox" ng-model="check"> </input></h3>
<h3>B ->> <input type="checkbox" ng-mode
浏览 0提问于2013-08-16得票数 5
回答已采纳
如何防止分支在拉流请求中被意外删除？
问题是"Complete pull request“选中了"Delete dev after merging”复选框，这似乎是默认选中的，这可能是因为我是repos的所有者。
是否有办法对所有用户禁用此功能？
浏览 0提问于2018-02-05得票数 9
回答已采纳
我有一个简单的功能，可以在选中/取消选中复选框时禁用/启用选择元素。它工作得很好。然而，一旦表单被提交并且复选框已经被选中(在PHP的帮助下)，直到我两次单击该复选框，选择才会被禁用。
<select id="worldSelect" class="select" name="world">
<input id="worldcb" type="checkbox" checked="yes" value="any" name="world">
a
浏览 0提问于2012-05-10得票数 5
回答已采纳
2回答
我想知道是否可以使用“重置”按钮禁用表单元素或一组表单元素。详细内容:我有一个带有复选框和相关下拉列表的表单(带有size=1的“选择”元素)。当我选中其中一个复选框时，将启用对应的下拉列表。当我取消复选框时，对应的下拉列表将被禁用。
但当我单击“重置”按钮时，所有复选框都会自动取消选中，而通讯员下拉列表仍然处于启用状态。除了编写自己的函数(在下拉列表上迭代、禁用每个下拉列表并将此函数分配给窗体的“on重置”事件)之外，还有另一个选项可以禁用它们吗？
亲切的问候
埃韦根尼
浏览 6提问于2014-03-24得票数 0
回答已采纳
3回答
我在循环视图中有复选框的列表/行。在我的例子中，用户只能选择多个复选框中的3个。一旦用户选中第三个复选框，我就想禁用不同行中的其余复选框。
我捕捉到了在adapter类中选择/取消选择复选框。
据我所知，我可以在onBindViewHolder类中启用/禁用复选框。
但在我的例子中，我希望在呈现复选框之后启用/禁用它们。
我能想到的一种方法是，从Activity类调用notifyDataSetChanged();，然后重新呈现所有回收的视图。
但我希望有比这更好的方法，在适配器类本身内部。
ps:我是android/java的新手。
浏览 2提问于2017-06-29得票数 1
3回答
我正在使用Angular 5中的ngModel，这里是Html
<span *ngFor="let id of Ids">
<input class="checkbox" type="checkbox" [(ngModel)]="strManyModel[id]" (change)="setValue($event)" [value]="id">
</span>
这是typeScript
setValue(e){
if(selectedChkBo
浏览 0提问于2018-03-29得票数 2
2回答
使checkBox只读
、、、
我希望有一个只读复选框，并禁用切换(选中/unchecked)时，我单击复选框。我有哪种可能性？这是我的密码：
<label className="checkbox">
<input type="checkbox"/>
</label>
我读到了一篇文章，其中提出了这个解决办法：
<input type="checkbox" onclick="return false" />
...but，我如何在反应中使用它？
浏览 10提问于2021-09-27得票数 0
回答已采纳
3回答
以下代码工作正常，但出现1个错误
$(document).ready(
function() {
$("#myCheckboxes input[type='checkbox']").change(function() {
var checked = $("#myCheckboxes input[type='checkbox']:checked").length;
if(checked == 4){
$("#myCheckboxes input[type='che
浏览 0提问于2009-10-13得票数 2
回答已采纳
2回答
我有一个带有复选框列的Mat表。我正在根据某些条件将某些复选框设置为禁用。但是，如果单击行，用户仍然可以选中该复选框。如何防止复选框在禁用时被选中:这是我从材料设计网站https://stackblitz.com/edit/angular-erpaus?file=app%2Ftable-selection-example.html派生的stackblitz示例。您不能单击该复选框，但如果您在其外部单击，则会选中该复选框： ? <mat-checkbox (click)= "$event.stopPropagation()"
浏览 24提问于2019-06-04得票数 2
回答已采纳
3回答
我希望能够在选中复选框并执行onChange方法之后禁用复选框。
我找到了一种方法来做到这一点，但是一旦多个项目被选中，只有最近选中的复选框被禁用。
禁用方法位于呈现方法之前的组件类中。
Disable = id => {
document.getElementById(id).disabled = true;
//another method to execute onchange
};
<span>
<input
type="checkbox"
className="form-check-input"
浏览 0提问于2020-03-29得票数 1
回答已采纳
2回答
我有一个带有几个复选框的layout。当一个复选框被选中时，其他复选框被设置为CHECKED=true和ENABLED=false。现在，我希望用户能够点击任何禁用的复选框，如果他这样做了，其中一个被设置为启用和选中，其他所有复选框都被禁用。
当复选框设置为ENABLED=false时，onTouchListener和onClickListener似乎不会被调用。有人能帮上忙吗？
浏览 3提问于2013-01-04得票数 3
我想知道如何使用jQuery禁用未选中的复选框。如果选中复选框的数量大于或等于3，则目标是禁用未选中复选框。
$('.myCheckBox').change(function() {
var checkBoxLenghtStandard = $('[name="addon-2811-workshop-normal- 1[]"]:checked').filter(':checked').length;
if (checkBoxLenghtStandard >= 3) {
//Here I wou
浏览 0提问于2019-03-20得票数 2
回答已采纳
5回答
我有一些链接和选择框的集合。我的html代码如下
<div>
<div>
<a href='#' onclick='set_checked(false,"checkbox1")'>clear</a>
<a href='#' onclick='set_checked(true,"checkbox1")'>select</a>
</div>
<div>
浏览 0提问于2012-05-09得票数 0
回答已采纳
我使用的是ASP.NET checkboxlist控件。在页面上，我有一个超链接。单击blockUI插件会显示一个包含checkbox列表控件的div。
再次调用blockUI时，复选框的状态始终为未选中状态。即使以前在页面上选中了复选框，这些复选框也始终处于未选中状态。
$("#multipleIA a:contains('multiple IA')").click(function () {
if($("#IACodes select option").size() > 0)
{
浏览 3提问于2009-12-28得票数 0
回答已采纳
在extjs4中，我在表单中使用FieldSet，并且我使用属性'checkboxToggle'，如果是真的，fieldSet标题的位置将出现一个复选框，这就是我期望的UI。但是，这不是我的例外:当复选框选中字段集展开时，当复选框未选中字段集时，字段集折叠。我希望这样:当复选框选中字段集启用时，当复选框未选中字段集时，字段集被禁用。我该怎么做？谢谢!
浏览 1提问于2013-03-28得票数 0
4回答
我的页面上有一个HTML复选框元素，如下所示：
<input type="checkbox" id="locked" /><label for="locked">Locked</label>
我在$(document).ready()中进行调用，将其更改为jQuery UI复选框按钮，如下所示：
$('#locked').button({
'icons': {
'primary': 'ui-icon-unlocked'
浏览 2提问于2011-09-12得票数 16
回答已采纳
我想禁用复选框输入，我的意思是，用户不能选中复选框
有一个属性可以禁用它吗？例如启用或禁用？或者我该怎么解决这个问题呢？
<input type="checkbox" name="isActive" [(ngModel)]="user.isActive">
有什么想法吗？
浏览 2提问于2017-04-19得票数 2
2回答
我是一个新手，这是我的第一个帖子，所以当我选中一个复选框时，你需要你的帮助来禁用列表视图中的所有单选按钮控件，它只对一行有效。
下面是我的代码：
protected void chkb_DG_NO_CheckedChanged(object sender, EventArgs e)
{
foreach (ListViewItem item in ListView1.Items)
{
RadioButton RD1 = (RadioButton)Li
浏览 1提问于2012-07-18得票数 2
我使用的是CodenameOne蓝色主题(‘附带’CodenameOne)。我向BoxLayout.Y容器添加了复选框。选中其中一个复选框时，复选框会变得越来越小、越来越宽。我看了主题，但我找不到原因。在Android 4.4上测试
我添加了两张图片来展示发生了什么。在第一个中，METAR被选中(我猜是未选中)，在第二个中，TAF被选中。
选中另一个复选框后，之前选中的复选框大小再次正常。
浏览 1提问于2016-02-28得票数 1
2回答
我有一个包含几个项目的网格，每个行的开头都有一个复选框。我还在网格顶部有一个“选择所有”复选框。这种情况类似于我们的gmail或雅虎收件箱。我的问题是，假设我禁用了一个复选框，然后单击“选中所有复选框”，则不应选中已禁用的复选框。有什么解决办法吗？我已附上相关代码如下。
*aspx文件
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
<HeaderTemplate>
<asp:CheckBox id="headerChkbox&
浏览 3提问于2011-08-22得票数 0
回答已采纳
只是想知道，是否可以使用jquery/javascript将请求验证分配给asp:TextBox？
我有以下代码将创建一个复选框，旁边有一个文本框：
<tr>
<th class="graytext r">Add Reps to Team:</th>
<td>
<asp:GridView ID="grid" runat="server" AutoGenerateColumns="False"
浏览 7提问于2011-06-29得票数 0
我有一个带有重复复选框的表，当我选中复选框时，它将调用java web服务并更新该记录的状态；由于AJAX调用进行了两次，因此它将转到错误部分；如何避免进行两次调用；我尝试了async: false，不起作用；在查看了一些站点后，尝试使用e.preventDefault()，添加this make call一次，但复选框不会被取消选中并且不会消失；预期的行为是当复选框被选中时，进行服务调用并将状态更改为挂起并取消复选框；
浏览 10提问于2018-01-09得票数 0
我有一个包含两个检查列和一个文本字段的网格
{
xtype: 'checkcolumn',
id: 'apprId',
text: '<b>Approve</b>',
width: 100,
dataIndex: 'aprvInd'
},
{
xtype: 'checkcolumn',
id: 'declId',
text: '<b>Decline</b>
浏览 2提问于2014-07-31得票数 0
我有一个按钮、一个文本字段和一个复选框。最初复选框处于选中状态。当我取消选中复选框时，按钮和文本框都应该被禁用。如何实现这一点。
浏览 0提问于2011-11-23得票数 0
回答已采纳
我正在尝试获得复选框，在这种情况下标题为“男性”和“女性”，以允许选择一个选项。即，单击male，female复选框变灰/禁用，取消选中male，female复选框重新启用并能够单击，这将随后禁用male复选框选项。 我已经能够选中这两个框中的任何一个，并使用内联"onClick“禁用另一个框。但是，一旦另一个复选框禁用，当我取消选中选中的复选框时，它将保持禁用状态。 <label>
<input type="checkbox" onC
浏览 16提问于2021-09-30得票数 0
回答已采纳
2回答
我有一个带有复选框的表单，其“选中”值是从数据库后面的代码中填充的。
想象一下，如果我的复选框1、2和3都设置为签入数据库。我加载页面，取消复选框3，然后将更改提交到数据库。现在在我的数据库中，复选框1和2被选中，3被取消选中。我刷新页面，它将获得更新的数据库值，并且复选框具有正确的选中值。
这只适用于我的铬和FF。在IE中，即使我取消复选框3，将更改提交到数据库并刷新，它仍然会出现选中。我强制使用ctrl+f5进行刷新，但它仍然没有更新。将autocomplete="off“添加到复选框和父窗体中都没有效果。
浏览 4提问于2013-12-05得票数 7
回答已采纳
使用中的复选框(而不是按钮集)
并希望有一个start over按钮取消选中所有JQuery复选框，使用Jquery创建复选框作为输入，这样下面的支柱就不能工作了。
<script>
$(function() {
$( "#startover" ).click(function() {
$("#mycheck").prop("checked", false);
浏览 1提问于2013-09-11得票数 2
回答已采纳
我有下面的事件代码，它在我的页面上重新加载代码部分。问题是，如果复选框被选中，我无法找到在重新加载后重新选中它的方法。
jQuery(this.el).find('.view_all_future_filter').click(function () {
TodoNote.view_all_future_filter = jQuery(this).prop('value');
_this.parent.reload();
})
我尝试了以下方法，但复选框一直处于未选中状态：
if(this.view_all_future_filter == &#
浏览 3提问于2014-02-01得票数 0
3回答
我正在尝试将一个函数分配给几个复选框，但我只希望根据一个条件添加它们，在本例中是表单的步骤编号。这是一种在选中(或未选中)复选框后使其变为readOnly的间接方法。因此，在步骤1中，我希望用户选择cb1或cb2，但在步骤2中，我希望分配不允许更改复选框值的函数。
我做错了什么？
function functionOne() {
this.checked = !this.checked
};
if (document.getElementById("stepNumber").value == 2) {
document.getElementById("c
浏览 0提问于2012-07-20得票数 0
回答已采纳
我正在开发一个桌面应用程序(VB.NET)。我有一个带有Dev Express Xtra Grid的表单。在网格中，我有第一列作为未绑定复选框(Repository Item)。现在，我已经完成了功能，以便用户可以选中/取消选中复选框来选择行。
我想要实现的是：
我在表格上有个按钮。如果没有选中复选框，则应禁用该按钮，否则应启用该按钮。默认情况下，当窗体加载时，将选中所有复选框并启用so按钮。用户可以取消选中所有复选框。那么，如何才能找到是否选中了任何一个复选框，或者没有使按钮启用/禁用。
在单击事件按钮上，我希望获得选中的所有行的id (这是复选框旁边的网格中的列)。
我确实
浏览 3提问于2012-11-02得票数 0
我需要帮助如何发送与jquery的值时，复选框被选中。到目前为止，我使用这个jquery在复选框处于选中状态时禁用它。但是当复选框也被选中时，我需要处理sql。请帮助我做这件事。
$('.processCheckbox').change(function() {
if (this.checked) {
this.setAttribute("disabled", true);
}
});
因此，当复选框选中时，我需要向data_process.php发送这两个值$init和$char。
&
浏览 2提问于2014-04-14得票数 4
selectpicker在checkbox旁边。如果选中复选框，选择器将被启用，如果未选中，选择选择器将被禁用。我写了这个不起作用的( )：
$('.checkBox').on('ifChecked', function(event) {
$(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled');
});
$('.checkBox').on('ifUnchecked', functi
浏览 5提问于2014-12-05得票数 26
回答已采纳
2回答
在JQGrid中添加以下内容后：
模型
{name: 'checkbox', index: 'checkbox', width:"5%", formatter: "checkbox", formatoptions: { disabled: false } },
列
“选择”
JQGrid已经显示列，其复选框是正确的，但默认情况下，所有复选框都会被选中，而这些复选框是不需要的。
我不确定这是否是JQGrid复选框列的默认行为。我不想显示默认选中的所有复选框。怎么解决这个问题？
浏览 1提问于2013-03-04得票数 0
2回答
我想使用Jquery重置复选框。我已经阅读了关于这个主题的Q/A，并提出了这个问题：
<script>
$(document).ready(function(){
$("#clearall").click(function(){
alert('clearing checkboxes');
$('input:checkbox').attr('checked',false);
});
});
</script>
<input id="cb1"
浏览 0提问于2017-03-21得票数 0
下面是对话框中的复选框和输入框的脚本。我想知道如何在复选框未选中的情况下禁用该条目。 class TestUI : UIFrame {
number true, false
TestUI(object self) {
true = 1;
false = 0;
result("[TestUI] constructed\n")
};
~TestUI(object self) {
result("[TestUI] destructed\n")
}
浏览 33提问于2021-07-17得票数 1
回答已采纳
3回答
我在游戏中有一些难度设置。因为一次只有一个选项是活动的，所以我这样做了，例如选项“简单”。
//Uncheck all other difficulty options
if(ui->actionMedium->isChecked())
{
ui->actionMedium->setChecked(false);
}
if(ui->actionHard->isChecked())
{
ui->actionHard->setChecked(false);
}
现在的问题是，如果我点击一个已经选中的复选框，该复选框将被取消选中。好的
浏览 0提问于2013-07-09得票数 0
回答已采纳
所有的，我有下面的PHP代码来选中一个复选框：
<input type="checkbox" name="check_out_gear[]" id="'.$resultsetgear['gear_checkout_id'].'" value="'.$resultsetgear['gear_checkout_id'].'" class="gear_checkout_checkbox" checked disabled>
该代码运行良好，复选框
浏览 3提问于2012-08-06得票数 0
回答已采纳
1回答
我在我的网站中使用ezMark库和PHP，Smarty，jQuery等。在这里的一个网页上，我想禁用几个复选框取决于某些条件。在此之后，有一个父复选框，在选择该复选框时，应选中所有未禁用的复选框，并在取消父复选框时反之亦然。此外，在选中父复选框之后，如果我取消选中的任何复选框(未禁用)，则父复选框也应取消选中。我试图通过常规代码分别检查和取消复选框(.attr('checked','checked')和.removeAttr('checked');来实现这一点)，但由于ezMark库的原因，在这种情况下无法工作。现在，我使用以下代码来选中和取消复
浏览 3提问于2013-10-07得票数 3
回答已采纳
1回答
我正在寻找一个解决方案，如何禁用复选框被选中，如果选中=‘是’在我的dataSource。
$("#grid").kendoGrid({
columns: [
{ selectable: true, headerTemplate:'<b>Some title</b>' },
{ field: "name" }
],
dataSource: [ { name: "Jane Doe", checked:"yes" },
{ na
浏览 0提问于2020-04-13得票数 0
5回答
我有多个复选框和一个最初被禁用的提交按钮。选中复选框时，该按钮处于启用状态，取消选中时，该按钮将再次禁用。
如果选中了多个复选框，但未选中其中一个，则即使我选中了其他复选框，该按钮也会变为禁用状态。如何解决此问题？
<script type="text/javascript">
$(function() {
$(".checkbox").click(function() {
$(".delete").attr("disabled", !this.checked);
});
});
<
浏览 6提问于2011-09-03得票数 6
回答已采纳
1回答
奇怪的问题。我不知道有没有人能解释清楚？我在div中有一个复选框。它在IE中运行良好，但不能在Firefox中运行。我必须单击复选框周围由div (有点像标签)占据的空间，复选框才能勾选。直接单击复选框不会将其显示为选中或关闭，即使在firebug中它显示它处于选中状态和未选中状态。
只有在FF才会发生这种情况……
浏览 3提问于2009-10-15得票数 0
我有一个网格视图，每一行都有一个复选框。当进入编辑模式时，可以选中/取消选中该复选框；但我不希望该复选框在任何其他模式下都是可编辑的。用户可能很容易被复选框所迷惑，这些复选框不能反映数据库中保存的实际值。
<asp:CheckBox id="checkboxCustomerRequired" runat="server" Checked='<%# Bind("CustomerRequired") %>' Enabled="false" CssClass="Check"/>
我
浏览 7提问于2016-08-25得票数 4
回答已采纳
我在Python脚本中使用ttkwidgets模块中的checkboxtreeview小部件。通过将状态设置为“选中”、“未选中”或“三态”，我可以使项目的复选框按预期显示。 有没有办法禁用复选框，即用户不能再通过单击它来更改状态？ 非常感谢您的帮助！
浏览 41提问于2019-05-06得票数 0
我正在尝试在Component对话框中实现Select-all复选框。选中/选中select-all复选框时，应选中所有其他复选框；取消选中/取消选中select-all复选框时，应取消选中所有其他复选框。
我编写的监听器代码是
function()
{
var type = this.getValue();
var flag = true;
if(type==''){
flag = false;
}
if(!flag){
this.findParentByType('dialo
浏览 0提问于2016-08-03得票数 0
回答已采纳
我有一台DataGridView，它工作得很好。我只是用它来显示数据。
现在我希望能够通过复选框选择行，并在单击按钮时仅对选定的行执行操作(此按钮在同一窗体上的网格之外)。为此，我遵循步骤将复选框列添加到datagridview。
在运行应用程序时看到的是，我无法通过鼠标单击或键盘选中该复选框。通过它的外观，我可以理解它没有处于禁用/只读状态。因此，每当我尝试单击复选框时，它都会像启用复选框一样正常地更改其边框。但是最后，它没有选中复选框。
浏览 2提问于2010-10-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
