Javascript 复选框onChange in<；图例>；内部残疾人<；字段集>；在Firefox中不使用React启动

以下内容适用于Firefox 80.0和Chromium 84.0.4147.89

const fieldset=document.getElementById（“fieldset”）；
const toggle=document.getElementById（“toggle”）；
toggle.addEventListener（“更改”，（）=>{
if（fieldset.hasAttribute（“已禁用”））{
fieldset.removeAttribute（“禁用”）；
}否则{
fieldset.setAttribute（“已禁用”，true）；
}
});

切换
根据该段前面的两行，浏览器似乎期望出现这种行为

已禁用
如果设置了此布尔属性，则所有作为
的后代的表单控件都将被禁用，这意味着它们不可编辑，并且不会随属性一起提交。他们不会收到任何浏览事件，如鼠标单击或焦点相关事件。默认情况下，浏览器会将此类控件显示为灰色。请注意，元素内的表单元素不会被禁用。-

Firefox似乎完全做到了它所描述的应该做的事情。

这里的一个解决方案是将
放在字段集之外，这样它就不会受到
disabled
属性的影响


编辑
你关于倾听DOM高层事件的评论让我开始思考。如果您将自己的事件侦听器与良好的ol'
addEventListener
绑定，并与
useRef
和
useffect
挂钩结合，从而绕过此问题，又如何。创建对复选框的引用，并在第一次渲染后侦听更改事件。现在事件正在侦听输入本身。

这种“变通方法”在FF中似乎确实有效


函数应用程序（）{
const[disabled，setDisabled]=React.useState（false）；
const-toggleElement=React.useRef（null）
const toggleDisabled=React.useCallback（（）=>{
setDisabled（disabled=>！disabled）；
}, []);
React.useffect（（）=>{
toggleElement.current.addEventListener（'change'，toggleDisabled）；
}, []);
返回(
切换
);
}
render（，document.getElementById（“根”））

感谢您的回答，但我不同意您对MDN文章的解释。我在我的问题中又添加了几个链接（W3C和WHATWG），这两个链接都表明规范定义了
的内容没有被禁用。@TomFenech。我已经看过你的例子了。W3C的第二个示例在Firefox中确实可以工作，但是React.js的实现失败了。React.js中是否可以添加一些关于表单中事件的逻辑？我认为问题在于React将事件侦听器附加到DOM中更高的位置，并且Firefox防止禁用字段集中的事件冒泡。我有一种感觉，我的问题的“答案”将是“你不能在Firefox中完成它”，不幸的是。@TomFenech团队合作很棒！你的评论让我想起了一些事情。查看FF中的编辑版本。是的，这很有效！我将把这个问题保留一段时间，看看是否有人有其他想法，但这是一个不错的解决办法，谢谢。