Jquery - Enable/disable multiple checkboxes in multiple lists
Question
I have three lists in my page (ul.list1, ul.list2, ul.list3) and each li of every list has checkboxes. From the beginning I want to have all checkboxes disabled except from the ones in .list1.
The thought is that I have to select THREE .list1-checkboxes, then only ONE in .list2 and then AUTOCHECK the .list3-checkbox.
To be more specific if I click three .list1-checkboxes I want to disable the rest of the .list1-checkboxes and enable .list2-checkboxes. 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.
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. If I uncheck the .list2-checkbox I want the the .list2-checkboxes to be enabled again and .list3-checkbox to be unchecked and disabled.
The HTML is something like that:
<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 answers
solution1
0 ACCPTED 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 . And if you want to use jQuery to attach event handlers, you can read 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.