Jquery 禁用复选框列表中的某些复选框

我有一个由13个不同值组成的复选框列表，当选择9、10和11时，我尝试使用jquery禁用所有这些值

因此，当选中9时，除10和11之外，所有选项都被禁用。当选择10时，除9和11外，所有功能均被禁用。当选择11时，除9和10外，所有功能均被禁用

实例
实例
实例
实例
实例
实例
实例
实例
实例
实例
实例
实例
实例
$（函数（）{
$（“输入[type='checkbox']”）。更改（函数（）{
调试器；
如果（$（（“输入[type='checkbox']）[9]）已选中）{
$（“输入[type='checkbox']”）。而不是（$（“输入[type='checkbox']”[9]）。属性（“已禁用”、“已禁用”）；
}
否则{
$（$input[type='checkbox']）。而不是（$（$input[type='checkbox']）[9]）。删除TTR（“已禁用”）；
}
});
});

答复:

<script>

    var indices = [9, 10, 11];

    indices.forEach(function (i) {
        $(".parent input[type='checkbox']").eq(i - 1).addClass("magic");
    });
    $(".parent input[type='checkbox']").change(function () {
        if ($(this).hasClass("magic")) {
            if (this.checked)
                $(".parent input[type='checkbox']:not(.magic)").prop("checked", false).prop("disabled", true);
            else {
                if ($(".parent input.magic[type='checkbox']:checked").length == 0)
                    $(".parent input[type='checkbox']:not(.magic)").prop("disabled", false);
            }
        }
    });
</script>

<style>
     label {display: block;}
.magic + span {font-weight: bold;}
 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <label><input type="checkbox" name="check[]" /> <span>Input 1</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 2</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 3</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 4</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 5</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 6</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 7</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 8</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 9</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 10</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 11</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 12</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 13</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 14</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 15</span></label>
</div>

var指数=[9,10,11]；
索引.forEach（函数（i）{
$（“.parent input[type='checkbox']”）.eq（i-1）.addClass（“magic”）；
});
$（“.parent输入[type='checkbox']”）。更改（函数（）{
if（$（this.hasClass（“magic”））{
如果（选中此项）
$（“.parent input[type='checkbox']：not（.magic）”）.prop（“checked”，false）。prop（“disabled”，true）；
否则{
if（$（“.parent input.magic[type='checkbox']：checked”）.length==0）
$（“.parent input[type='checkbox']：not（.magic）”）.prop（“disabled”，false）；
}
}
});
标签{显示：块；}
.magic+span{font-weight:bold；}
输入1
输入2
投入3
输入4
输入5
输入6
输入7
输入8
输入9
输入10
输入11
输入12
输入13
输入14
输入15

在这里尝试使用

index（）

和

eq

首先尝试使用查找已单击复选框的索引，然后检查它是否与条件（9、10或11）匹配使用禁用所有，并向选中复选框添加一个类，以检查匹配+选中的复选框的计数…稍后，如果此计数变为

0

则启用所有复选框

注意：

index（）

和

eq（）

从0开始

$（“.parent input[type='checkbox']”）。每个（函数（）{
$（this）.on（“change”，function（））{
var index=$（this）.closest（“label”）.index（）；
如果（索引===8 | |索引===9 | |索引===10）{
$（“input[type='checkbox']”）prop（“disabled”，true）；
$（“input[type='checkbox']”）.eq（8）.prop（“disabled”，false）；
$（“input[type='checkbox']”）.eq（9）.prop（“disabled”，false）；
$（“input[type='checkbox']”）.eq（10）.prop（“disabled”，false）；
$（this.prop（“disabled”，true）；
如果（选中此项）{
$（此）.addClass（“匹配”）；
}否则{
$（此）.removeClass（“匹配”）；
}
如果（$（“.matched”）.length==0）{
$（“input[type='checkbox']”）prop（“disabled”，false）；
}
}
})
})

标签{
位置：相对位置；
}
跨度{
位置：绝对位置；
最高：100%；
左：0；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

在这里尝试使用

index（）

和

eq

首先尝试使用查找已单击复选框的索引，然后检查它是否与条件（9、10或11）匹配使用禁用所有，并向选中复选框添加一个类，以检查匹配+选中的复选框的计数…稍后，如果此计数变为

0

则启用所有复选框

注意：

index（）

和

eq（）

从0开始

$（“.parent input[type='checkbox']”）。每个（函数（）{
$（this）.on（“change”，function（））{
var index=$（this）.closest（“label”）.index（）；
如果（索引===8 | |索引===9 | |索引===10）{
$（“input[type='checkbox']”）prop（“disabled”，true）；
$（“input[type='checkbox']”）.eq（8）.prop（“disabled”，false）；
$（“input[type='checkbox']”）.eq（9）.prop（“disabled”，false）；
$（“input[type='checkbox']”）.eq（10）.prop（“disabled”，false）；
$（this.prop（“disabled”，true）；
如果（选中此项）{
$（此）.addClass（“匹配”）；
}否则{
$（此）.removeClass（“匹配”）；
}
如果（$（“.matched”）.length==0）{
$（“input[type='checkbox']”）prop（“disabled”，false）；
}
}
})
})

标签{
位置：相对位置；
}
跨度{
位置：绝对位置；
最高：100%；
左：0；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

您可以将类添加到要禁用的复选框中，如下所示

$（文档）.ready（函数（）{
$（函数（）{
$（“输入[type='checkbox']”）。更改（函数（）{
如果（选中此项）{
如果（this.value=='example9'| | this.value=='example10'| | this.value=='example11'）{
$（'.test'）.attr（'disabled'，true）；
}
}否则{
如果（this.value=='example9'| | this.value=='example10'| | this.value=='example11'）{
if（$（“输入[type='checkbox']：未（.test）：选中”）。长度==0）
$（'.test'）.removeAttr（'disabled'）；
}
}
});
});
});

一,

二,

三,

四,

五,

六,

七,

八,

九,

十,

十一,

十二,

13
您可以将类添加到要禁用的复选框中，如下所示


$（文档）.ready（函数（）{
$（函数（）{
$（“输入[type='checkbox']”）。更改（函数（）{
如果（选中此项）{
如果（this.value=='example9'| | this.value=='example10'| | this.value=='example11'）{
$（'.test'）.attr（'disabled'，true）；
}
}否则{
如果（this.value=='example9'| | this.value=='example10'| | thi