У меня есть страница со списком флажков со значениями. Каждый флажок имеет атрибуты данных с соответствующими значениями. Если установлен первый флажок, я хочу, чтобы флажки, атрибуты данных которых равны атрибутам данных текущего флажка, оставались выбираемыми, в то время как все остальные отключены.
Я получаю эту работу в некоторой степени, но если снять любую из допустимых выбранных полей все остальные флажки включены. Я хочу, чтобы все остальные флажки были включены, если у меня не выбраны действительные.
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 можно выбрать, поскольку он удовлетворяет условиям, т.е. атрибуты данных одинаковы ... Все остальные отключены. Проблема в том, что когда я снимаю галочку с любого из действительных номеров, все остальные поля активируются. Я бы хотел, чтобы все остальные поля оставались отключенными, если не проверены действительные номера.
Пример кода здесь