使用Javascript禁用特定复选框

我想请求有关如何禁用特定复选框的帮助

情景：

如果我单击“全部是”复选框，则其他复选框将被禁用（第一季度至第四季度）

如果我在第一季度至第四季度复选框中选择了一个或多个复选框-“全部是”复选框将被禁用

代码：

$（'input[type=checkbox]'）。更改（函数（）{
如果（$（this）.is（':checked'））{
$（'input[type=checkbox]'）.attr（'disabled'，true）；
$（this.attr（'disabled'，''）；
}否则{
$（'input[type=checkbox]'）.attr（'disabled'，''；
}
});

Q1
问题2
第三季度
第四季度
对所有人都是
你可以这样做



Q1
问题2
第三季度
第四季度
对所有人都是
美元（“.q1_q4”）。关于（'change'，function（）{
美元（“.yta”）.attr（“禁用”、“禁用”）；
});
$（“.yta”）.on（'change'，function（）{
美元（“.q1_q4”）.attr（“禁用”、“禁用”）；
});
查看完美答案。


$（'input[type=checkbox]'）。更改（函数（）{
if（$（this）.is（'input[name=“QYTA”]'））{
如果（$（this）.is（':checked'））{
$（'input[type=checkbox][name！=“QYTA”]'）.attr（'disabled'，true）；
}否则{
$（'input[type=checkbox][name！=“QYTA”]'）.attr（'disabled'，false）；
}
}否则{
如果（$（this）.is（':checked'））{
$（'input[type=checkbox][name=“QYTA”]'）.attr（'disabled'，true）；
}else if（$（'input[type=checkbox][name！=“QYTA”]：checked'）。长度==0）{
$（'input[type=checkbox][name=“QYTA”]'）.attr（'disabled'，false）；
}
};
});

Q1
问题2
第三季度
第四季度
所有选项均为“是”
您需要检查复选框是否按照您的要求选中，
条件1：如果所选问题长度大于1，则禁用YTA
条件2：如果选择了YTA，则禁用所有问题

如果还需要什么，请告诉我。
$（'.yta'）.change（函数（）{
if（$（'.yta:选中'）.length）{
$（'.q'）.attr（'disabled'，true）；
}否则{
$（'.q'）.removeAttr（“禁用”）；
}
});
$（'.q'）.change（函数（）{
if（$（'.q:选中'）.length）{
$（'.yta'）.attr（'disabled'，true）；
}否则{
$（'.yta'）.removeAttr（“禁用”）；
}
});

Q1
问题2
第三季度
第四季度
所有属性都是
您可以使用jQuery中的
.prop
函数轻松添加和删除禁用的属性。如果在同一页上使用其他复选框，则需要优化选择器


$（'input[type=checkbox]'）。更改（函数（）{
if（this.name==“QYTA”&&this.checked）{
$（'input[type=checkbox][name！=“QYTA”]'）.prop（“disabled”，true）；
}else if（this.name！=“QYTA”&&this.checked）{
$（'input[type=checkbox][name=“QYTA”]'）.prop（“disabled”，true）；
}否则{
$（'input[type=checkbox]'）.prop（“disabled”，false）；
}
});

Q1
问题2
第三季度
第四季度
对所有人都是
我的哲学回答：


尽可能避免jQuery
使用做一件事的小函数
请记住，在文档中多次使用时，同样的方法也应该有效
防止代码中出现神奇的值
尽可能地封装

这看起来有点过分，但这是有效的


{
函数检查答案（QName、allName）{
const qSelector=qNames.map（e=>`[name=“${e}]”）。join（'，'））
const allSelector=`[name=“${allName}”]`
常量选择器=`${qSelector}，${allSelector}`；
const getValue=（）=>Array.from（document.querySelectorAll（selector））.filter（e=>e.checked.map（e=>（{[e.name]：e.value}））
const checkQ=value=>value.map（e=>Object.keys（e）[0]）.filter（value=>qNames.includes（value））.length>0；
const checkAll=value=>value.map（e=>Object.keys（e）[0]）。包括（allName）
const qDisable=（）=>Array.from（document.querySelectorAll（qSelector））.forEach（e=>e.disabled=true）
const qEnable=（）=>Array.from（document.querySelectorAll（qSelector））.forEach（e=>e.disabled=false）
const allDisable=（）=>document.querySelector（allSelector）.disabled=true
constallenable=（）=>document.querySelector（allSelector）.disabled=false
返回e=>{
如果（！e.target.closest（选择器））{return}
const value=getValue（）；
如果（检查Q（值））{
allDisable（）；
}else if（选中全部（值））{
qDisable（）
}否则{
allEnable（）；
qEnable（）；
}
}
}  
设qNames=['QA1'，'QA2'，'QA3'，'QA4']
让allName='QAYTA'
document.addEventListener（'change'，checkAnswers（QName，allName））
qNames=['QB1'、'QB2'、'QB3'、'QB4']
allName='QBYTA'
document.addEventListener（'change'，checkAnswers（QName，allName））
}
：禁用+标签{
颜色：浅灰色；
}
问题1

问题2

问题3

问题4

对所有人都是



问题1

问题2

问题3

问题4

对所有
都是，我的解决方案是为每个复选框设置
onchange
事件处理程序

然后根据触发
onchange
事件的元素执行不同的操作

如果
QYTA
触发
onchange
，则禁用
Q1
至
Q4
复选框。
其他的
禁用
QYTA
复选框

我利用了
checked
和
disabled
属性之间的逻辑差异

以下是我的解决方案：


$（“输入[type='checkbox']）。每个（函数（）{
$（this）.on（'change'，function（））{
if（this.name=='QYTA'）{
我希望能帮助你


$（“输入[type='checkbox']）。每个（函数（）{
$（此）。在（'单击'，函数（）上）{
var el=$（“输入[type='checkbox']”）。而不是（$（“输入[name='QYTA']”）；
var elAl=$（“输入[name='QYTA']”）；
if（$（this）.not（elAl）.length==0）{
如果（elAl.is（'：checked'））{
el.attr（“禁用”，真实）；
}否则{
$（“输入[type='checkbox']）；