fieldset 元素设置 disabled 属性后表单控件为何仍可点击
fieldset 元素设置 disabled 属性后，其内部表单控件默认会被浏览器置灰且无法交互，但位于 legend 元素内的控件不受此限制。
确认 disabled 属性的生效范围
fieldset 元素的 disabled 属性是一个布尔属性，当设置后，该元素内部所有表单控件都会被禁用。这意味着这些控件变为不可编辑状态，不会随表单一起提交，并且无法接收鼠标点击或焦点相关的浏览事件。浏览器通常会通过视觉样式将这些控件显示为灰色，以提示用户其不可用状态。开发者可以通过在浏览器开发者工具中检查这些控件的 disabled 属性是否被自动添加，来验证默认行为是否符合预期。
在验证过程中，应确保 fieldset 元素本身没有被其他 CSS 样式覆盖导致属性失效。例如，如果使用了 !important 规则或 JavaScript 动态移除了控件的 disabled 属性，则可能导致控件恢复可交互状态。可以通过移除 fieldset 的 disabled 属性或重置相关样式来测试控件是否重新被禁用，从而确认问题是否源于样式覆盖或脚本干扰。
排查 legend 元素内的控件异常
根据规范，fieldset 元素内部位于 legend 元素内的表单控件不会受到 disabled 属性的影响。这意味着即使 fieldset 被禁用，legend 标签内的输入框、复选框等控件仍然可以正常交互。这一设计允许在禁用整个表单组的同时，保留部分关键控件的可用性，例如在禁用登录表单时保留“记住我”的复选框。开发者可以通过在 legend 内部放置一个输入控件，并观察其在 fieldset 禁用状态下是否仍可点击，来验证这一行为。
如果发现 legend 内的控件意外被禁用，可能是因为该控件被显式地添加了 disabled 属性，或者其父级元素（如 div）被设置了禁用状态。可以通过移除控件上的 disabled 属性或检查其父级元素的样式来定位问题。此外，如果使用了 JavaScript 动态修改控件状态，也需要检查脚本逻辑是否错误地影响了 legend 内的控件。
检查表单关联与提交行为
fieldset 元素的 disabled 属性不仅影响控件的交互性，还会阻止这些控件随表单一起提交。当表单被提交时，所有位于禁用 fieldset 内的控件值都不会被包含在请求中。开发者可以通过在表单提交时检查请求参数，确认禁用 fieldset 内的控件是否被排除。如果需要排除某些控件但保留其值，应考虑将这些控件移出 fieldset 或使用其他方式控制其提交行为。
需要注意的是，fieldset 元素的 form 属性允许将其与不在其内部的表单关联，但 disabled 属性的作用范围仅限于 fieldset 内部的控件。如果 fieldset 通过 form 属性关联了外部表单，其内部的控件仍然会被禁用，但外部表单中未包含的控件不受影响。开发者可以通过检查 fieldset 的 form 属性设置和表单提交逻辑，确保禁用行为符合预期。
验证匿名盒子与继承属性的影响
fieldset 元素内部包含一个匿名盒子，用于包裹其内容并继承某些属性。虽然 disabled 属性直接作用于 fieldset 及其内部控件，但匿名盒子的样式设置可能间接影响控件的显示或交互。例如，如果匿名盒子的样式被修改为 pointer-events: none，可能会导致所有内部控件无法接收鼠标事件，即使控件本身未被禁用。开发者可以通过检查匿名盒子的样式，确认是否存在此类干扰。
此外，fieldset 的默认样式包括一个 2px 的凹槽边框和少量内边距，这些样式可能会影响控件的布局或交互区域。如果样式失效，可能是因为全局 CSS 规则重置了这些属性，或者样式优先级不足导致默认样式被保留。通过对比默认样式和当前样式，可以快速定位问题所在。例如，如果 fieldset 的边框被移除，可能会影响控件的视觉分组，但不会影响其禁用状态。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。