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>

来源

2016-07-16 mati

我们展示的代码 – apieceofbart

@apieceofbart我增加了一些HTML代码 – mati

@apieceofbart我很新的jQuery和研究小时后我很沮丧，并删除了这一切。我读过的一些文章是以下内容，但它们要么不是非常接近我的需求，要么我无法理解如何调整它们。如果你更好地理解，并可以建议我一篇文章/链接更接近我的需求，将非常感谢！ – mati

您的要求，可通过事件处理程序来达到的。您可以在此页面中找到活动列表：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>

来源

2016-07-16 12:08:56

This works !!!!非常感谢您的帮助和您的链接！ – mati

欢迎您:) –

Jquery - 启用/禁用多个列表中的多个复选框

回答

相关问题