Jquery - 启用/禁用多个列表中的多个复选框
我的页面有三个列表(ul.list1,ul.list2,ul.list3),每个列表中的每个列表都有复选框。从一开始,我希望所有复选框都禁用,除了.list1中的复选框。Jquery - 启用/禁用多个列表中的多个复选框
这个想法是,我必须选择三个.list1复选框,然后在.list2中只有一个,然后AUTOCHECK .list3复选框。
更具体地说,如果我点击三个.list1复选框,我想禁用.list1复选框的其余部分并启用.list2复选框。但是,如果我取消选中.list1复选框之一,我想再次启用其余的.list1复选框并禁用.list2复选框,无论我是否已经点击过它们。
现在,如果我选择一个.list2复选框,我希望禁用.list2复选框的其余部分,并在.list3中启用和自动检查只有一个复选框。如果我取消选中.list2复选框,我希望再次启用.list2复选框,并且取消选中和禁用.list3复选框。
的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>
您的要求,可通过事件处理程序来达到的。您可以在此页面中找到活动列表: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="[email protected]" 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>
This works !!!!非常感谢您的帮助和您的链接! – mati
欢迎您:) –
我们展示的代码 – apieceofbart
@apieceofbart我增加了一些HTML代码 – mati
@apieceofbart我很新的jQuery和研究小时后我很沮丧,并删除了这一切。 我读过的一些文章是以下内容,但它们要么不是非常接近我的需求,要么我无法理解如何调整它们。 如果你更好地理解,并可以建议我一篇文章/链接更接近我的需求,将非常感谢! – mati