如果选中第一个复选框，则根据条件禁用其他复选框

Question

我有一个页面，其中包含带有值的复选框列表。每个复选框都有具有相应值的数据属性。如果第一个复选框被选中，我只希望其数据属性等于当前复选框的数据属性的复选框保持可选状态，而所有其他复选框都被禁用。

我已经在一定程度上完成了这项工作，但如果我取消选中任何有效的选定框，所有其他复选框都会被启用。如果我没有选择任何有效的复选框，我只希望启用所有其他复选框。

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <label>Number:7967</label>
<input type="checkbox" class="my-check" data-number="7867" data-code="CB45" / >
 <label>Number:3307</label>
<input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" / >
 <label>Number:3307</label>
<input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" / >
 <label>Number:5645</label>
<input type="checkbox" class="my-check" data-number="5645" data-code="KLY" / >
</body>
</html>
$(function(){


    $(".my-check").each(function (e, elem) {
            $(elem).on("change", function () {
                var num = $(this).data("number");
                var co = $(this).data("code");
                if ($(this).eq(0).is(':checked')) {

                    $('.my-check:not([data-number=' + num + '])').attr('disabled', true);
                    $('.my-check:not([data-code=' + co + '])').attr('disabled', true);
                } else {
                    $(".my-check").not($(this)).attr('disabled', false);
                }

            });

        })

从图像中可以看出，编号 3307 是可选的，因为它们满足条件，即数据属性相同......所有其他的都被禁用。问题是当我取消选中任何有效数字时，所有其他框都已启用。我希望所有其他框保持禁用状态，除非未选中有效数字。

Sample code here

Answer 1

您可以通过检查当前 data-* 组中的任何复选框是否被选中来解决此问题。如果选中 none，则仅启用其他 .my-check 复选框，例如：

$(function() {
  $(".my-check").each(function(e, elem) {
    $(elem).on("change", function() {
      var num = $(this).data("number");
      var co = $(this).data("code");
      if ($(this).eq(0).is(':checked')) {
        $('.my-check:not([data-number=' + num + '])').attr('disabled', true);
        $('.my-check:not([data-code=' + co + '])').attr('disabled', true);
      } else {
        if (!$('.my-check[data-number=' + num + ']:checked').length) {
          $(".my-check").not($(this)).attr('disabled', false);
        }
      }
    });
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Number:7967</label>
<input type="checkbox" class="my-check" data-number="7867" data-code="CB45" />
<label>Number:3307</label>
<input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" />
<label>Number:3307</label>
<input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" />
<label>Number:5645</label>
<input type="checkbox" class="my-check" data-number="5645" data-code="KLY" />

如果选中第一个复选框，则根据条件禁用其他复选框

If first checkbox is checked , disable others based on condition

checkbox

jquery

jquery-plugins