Jquery - 在多个列表中启用/禁用多个复选框
Posted
技术标签:
【中文标题】Jquery - 在多个列表中启用/禁用多个复选框【英文标题】：Jquery - Enable/disable multiple checkboxes in multiple lists 【发布时间】：2016-11-19 11:03:13 【问题描述】：我的页面中有三个列表（ul.list1、ul.list2、ul.list3），每个列表的每个 li 都有复选框。从一开始我就想禁用所有复选框，除了 .list1 中的复选框。
我的想法是我必须选择三个 .list1-checkboxes，然后在 .list2 中只选择一个，然后自动检查 .list3-checkbox。
更具体地说，如果我单击三个 .list1-checkboxes，我想禁用其余的 .list1-checkboxes 并启用 .list2-checkboxes。但是，如果我取消选中其中一个 .list1-checkboxes，我想再次启用其余 .list1-checkboxes 并禁用 .list2-checkboxes，无论我是否已经点击了它们。
现在，如果我选择一个 .list2-checkbox，我希望禁用其余的 .list2-checkboxes，并在 .list3 中启用并自动选中仅有的一个复选框。如果我取消选中 .list2-checkbox，我希望再次启用 .list2-checkboxes 并取消选中和禁用 .list3-checkbox。
html 是这样的：
<div>
<ul class="list1">
<li><input type="checkbox" /><label>list1-item1</label></li>
<li><input type="checkbox" /><label>list1-item2</label></li>
<li><input type="checkbox" /><label>list1-item3</label></li>
<li><input type="checkbox" /><label>list1-item4</label></li>
<li><input type="checkbox" /><label>list1-item5</label></li>
</ul>
</div>
<div>
<ul class="list2">
<li><input type="checkbox" /><label>list2-item1</label></li>
<li><input type="checkbox" /><label>list2-item2</label></li>
<li><input type="checkbox" /><label>list2-item3</label></li>
<li><input type="checkbox" /><label>list2-item4</label></li>
<li><input type="checkbox" /><label>list2-item5</label></li>
<li><input type="checkbox" /><label>list2-item6</label></li>
<li><input type="checkbox" /><label>list2-item7</label></li>
<li><input type="checkbox" /><label>list2-item8</label></li>
</ul>
<div>
</div>
<ul class="list3">
<li><input type="checkbox" /><label>list3-item1</label></li>
</ul>
</div>
【问题讨论】：
@apieceofbart 我添加了一些 html 代码 @apieceofbart 我对 jQuery 非常陌生，经过数小时的研究后，我感到沮丧并删除了它。我读过的一些文章如下，但它们要么不是很接近我的需求，要么我不明白如何调整它们。如果您能更好地理解并可以向我推荐一篇更接近我需求的文章/链接，我们将不胜感激！ @apieceofbart link, link, link, link 【参考方案1】：您的要求可以通过事件处理程序来实现。您可以在此页面中找到事件列表：HTML DOM Events。如果你想使用 jQuery 来附加事件处理程序，你可以阅读on() | jQuery API。
// Code goes here
$(function()
var list1 = $('.list1 > li > input[type="checkbox"]');
var list2 = $('.list2 > li > input[type="checkbox"]');
var list3 = $('.list3 > li > input[type="checkbox"]');
list1.on('change', function(event)
var numList1 = $(list1).filter(':checked').length;
if(numList1 >= 3)
$(list1).filter(':not(:checked)').prop('disabled', true);
$(list2).prop('disabled', false);
else
$(list1).prop('disabled', false);
$(list2).prop('checked', false).prop('disabled', true);
$(list3).prop('checked', false).prop('disabled', true);
);
list2.on('change', function(event)
var numList2 = $(list2).filter(':checked').length;
if(numList2 >=1)
$(list2).filter(':not(:checked)').prop('disabled', true);
$(list3).prop('checked', true).prop('disabled', false);
else
$(list2).prop('disabled', false);
$(list3).prop('checked', false).prop('disabled', true);
);
);<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div>
<ul class="list1">
<li>
<input type="checkbox" />
<label>list1-item1</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item2</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item3</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item4</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item5</label>
</li>
</ul>
</div>
<div>
<ul class="list2">
<li>
<input type="checkbox" disabled/>
<label>list2-item1</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item2</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item3</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item4</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item5</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item6</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item7</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item8</label>
</li>
</ul>
<div></div>
<ul class="list3">
<li>
<input type="checkbox" disabled/>
<label>list3-item1</label>
</li>
</ul>
</div>
</body>
</html>【讨论】：
以上是关于Jquery - 在多个列表中启用/禁用多个复选框的主要内容，如果未能解决你的问题，请参考以下文章
我有多个复选框和多个文本输入。如果复选框被选中，则需要启用它旁边的文本输入
asp.net c#.net jquery / javascript 如何使用复选框启用或禁用 requiredfieldvalidator