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 - 啓用/禁用多個列表中的多個複選框

回答

相關問題