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

Posted

技术标签:

【中文标题】如果选中第一个复选框,则根据条件禁用其他复选框【英文标题】:If first checkbox is checked , disable others based on condition 【发布时间】:2020-08-09 02:49:03 【问题描述】:

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

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

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

【问题讨论】:

"但是如果我取消选中任何有效的选中框,则所有其他复选框都将启用。如果我没有选择任何有效复选框,我只希望启用所有其他复选框。 “我没有得到这部分你能举一些例子来更好地解释这一点。就像你检查和取消检查然后发生了什么,而是你所期望的! @palaѕн 我已经编辑了这个问题......希望它有助于澄清我想要完成的事情。 【参考方案1】:

您可以通过检查当前data-* 组中的任何复选框是否被选中来解决此问题。如果没有选中,则仅启用其他 .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" />

【讨论】:

以上是关于如果选中第一个复选框,则根据条件禁用其他复选框的主要内容,如果未能解决你的问题,请参考以下文章

如果所有复选框都未选中,则禁用按钮,如果至少选中一个,则启用它

如果在 Jquery 加载页面时在网格中禁用了所有复选框,则如果没有选中复选框并禁用按钮,则发出警报

如果复选框选中禁用其他,如果未选中启用所有 JavaScript?

如果选中/取消选中复选框,则启用/禁用提交按钮?

Angular2,如果没有选中复选框,则禁用按钮

选中另一个时禁用复选框