Jquery - 启用/禁用多个列表中的多个复选框
[英]Jquery - Enable/disable multiple checkboxes in multiple lists
问题描述
I have three lists in my page (ul.list1, ul.list2, ul.list3) and each li of every list has checkboxes. 
我的页面中有三个列表（ul.list1，ul.list2，ul.list3），每个列表的每个列表都有复选框。 From the beginning I want to have all checkboxes disabled except from the ones in .list1. 从一开始我想要禁用所有复选框，除了.list1中的复选框。
The thought is that I have to select THREE .list1-checkboxes, then only ONE in .list2 and then AUTOCHECK the .list3-checkbox. 我的想法是我必须选择THREE .list1-checkboxes，然后在.list2中只选择一个然后自动检查.list3复选框。
To be more specific if I click three .list1-checkboxes I want to disable the rest of the .list1-checkboxes and enable .list2-checkboxes. 更具体地说，如果我单击三个.list1复选框，我想禁用.list1复选框的其余部分并启用.list2复选框。 But if I uncheck one of the .list1-checkboxes I want to enable the rest .list1-checkboxes again and disable .list2-checkboxes whether I had already clicked on them or not. 但是，如果我取消选中其中一个.list1复选框，我想再次启用其余的.list1复选框并禁用.list2复选框，无论我是否已经点击它们。
Now if I select one .list2-checkbox I want the rest of the .list2-checkboxes to be disabled and in .list3 enable and autocheck the only one checkbox there is. 现在，如果我选择一个.list2-checkbox，我希望禁用.list2复选框的其余部分，并在.list3中启用并自动选中唯一的复选框。 If I uncheck the .list2-checkbox I want the the .list2-checkboxes to be enabled again and .list3-checkbox to be unchecked and disabled. 如果我取消选中.list2复选框，我希望再次启用.list2复选框，并取消选中.list3复选框。
The HTML is something like that: 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>
1 个解决方案
解决方案1
0 已采纳 2016-07-16 12:08:56
Your requirements can be acheived through event handlers. 您的要求可以通过事件处理程序实现。 You can find a list of events in this page : HTML DOM Events . 您可以在此页面中找到事件列表： HTML DOM Events 。 And if you want to use jQuery to attach event handlers, you can read on() | 如果你想使用jQuery来附加事件处理程序，你可以阅读on（）| jQuery API . 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.