如果选中第一个复选框，则根据条件禁用其他复选框
如果选中第一个复选框，则根据条件禁用其他复选框
提问于 2020-04-25 22:02:37
我有一个包含复选框列表和值的页面。每个复选框都具有具有相应值的数据属性。如果选中第一个复选框，我只希望数据属性与当前复选框的数据属性相等的复选框保持可选状态，而所有其他复选框都被禁用。
我已经在一定程度上做到了这一点，但如果我取消选中任何有效的选中框，所有其他复选框都会被启用。如果我没有选择任何有效的复选框，我只希望启用所有其他复选框。
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是可选的，因为它们满足条件，即数据属性是相同的……所有其他的都被禁用。问题是，当我取消选中任何有效数字时，所有其他框都处于启用状态。我希望所有其他框保持禁用状态，除非没有选中有效数字。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-25 22:37:56
您可以通过检查当前data-*组中的任何复选框是否处于选中状态来解决此问题。如果未选中任何复选框，则仅启用other .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" />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61426850
复制相关文章
相似问题
腾讯云开发者
