Question

我的页面中有三个列表（ul.list1，ul.list2，ul.list3），每个列表中的每个列表都有复选框。从一开始我想要禁用所有复选框，除了.list1中的复选框。

我的想法是我必须选择三个.list1复选框，然后只选择.list2中的一个然后自动检查.list3复选框。

更具体地说，如果我点击三个.list1复选框，我想禁用其余的.list1复选框并启用.list2复选框。但是，如果我取消选中其中一个.list1复选框，我想再次启用其余.list1复选框并禁用.list2复选框，无论我是否已经点击它们。

现在，如果我选择一个.list2-checkbox，我希望禁用.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>

Answer 1

您的要求可以通过事件处理程序实现。您可以在此页面中找到事件列表：HTML DOM Events。如果你想使用jQuery来附加事件处理程序，你可以阅读on() | jQuery API。

＆＃13;

// 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);
    }
  });
});

＆＃13;

<!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>

＆＃13;

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

1 个答案: