fieldset 元素设置 disabled 属性后 legend 内控件为何仍可交互
浏览器规范规定 legend 元素内的表单控件不会被 disabled 属性禁用，开发者可据此在标题中放置交互元素。
legend 内控件不受 disabled 属性影响的原因
根据 HTML 规范，当 fieldset 元素设置了 disabled 属性时，该属性会自动禁用其所有表单控件的交互能力，包括鼠标点击和键盘焦点事件。然而，规范明确指出位于 legend 元素内部的表单控件不受此限制，不会被禁用。这是因为 legend 元素被视为 fieldset 的标题或说明，其内容被视为标题的一部分，而不是表单控件的一部分。这种设计确保了标题的可读性和可访问性，防止标题内的控件被意外禁用。
开发者可以利用这一特性，在标题中放置必要的说明性输入框或按钮，而不必担心它们被意外禁用。例如，可以在 legend 中放置一个用于输入说明的文本框，或者一个用于调整标题样式的按钮。这种灵活性使得开发者能够更精细地控制表单的布局和交互，同时保持代码的语义化和可访问性。需要注意的是，这种豁免仅适用于 legend 元素本身，如果控件被包裹在 legend 的子元素中，则仍可能被禁用。
排查控件仍可交互的检查步骤
如果发现 fieldset 设置了 disabled 后，某些控件仍然可以点击或接收焦点，首先应检查该控件是否位于 legend 元素内部。可以通过浏览器开发者工具检查 DOM 结构，确认控件是否是 fieldset 的直接子元素，或者是否被其他非 legend 元素包裹。例如，如果控件被包裹在 legend 的 div 或 span 中，则该控件可能仍会被禁用。开发者应确保控件直接位于 legend 元素内部，而不是被其他标签包裹。
另一个可能的原因是 CSS 样式覆盖。虽然浏览器默认会给禁用的控件添加灰色样式，但开发者可能使用了 CSS 强制移除了 disabled 状态的视觉样式，或者使用了 pointer-events: none 等属性导致鼠标事件无法被拦截。此时需要检查 fieldset 及其子元素的 CSS 规则，确保没有覆盖浏览器的默认行为。开发者应使用浏览器开发者工具的 Elements 面板，检查控件的 computed styles，确认是否被 CSS 覆盖。
验证控件交互状态的方法
验证控件是否被禁用的最直接方法是尝试点击该控件。如果控件被正确禁用，鼠标悬停时不会显示手型光标，点击时不会有任何反应，且控件呈现灰色背景。同时，使用键盘 Tab 键无法将焦点移动到该控件上，这也是禁用的特征。对于 legend 内的控件，即使 fieldset 设置了 disabled，这些控件仍应可以接收焦点和点击事件。开发者应确保这些控件能够正常交互，以验证其是否位于 legend 内部。
另一种验证方式是查看浏览器开发者工具的 Elements 面板。选中该控件后，在属性列表中查看是否包含 disabled 属性。如果属性存在且值为 true，说明控件已被禁用；如果属性不存在，则说明该控件未被 fieldset 的 disabled 属性影响。对于 legend 内的控件，即使 fieldset 设置了 disabled，这些控件也不应包含 disabled 属性。开发者应确保这些控件能够正常交互，以验证其是否位于 legend 内部。
利用该特性实现表单布局的技巧
开发者可以利用 legend 内控件不受禁用限制的特性，在表单标题中放置一些必要的交互元素。例如，可以在 legend 中放置一个用于输入说明的文本框，或者一个用于调整标题样式的按钮。这种灵活性使得开发者能够更精细地控制表单的布局和交互，同时保持代码的语义化和可访问性。例如，可以在 legend 中放置一个用于输入说明的文本框，或者一个用于调整标题样式的按钮。
需要注意的是，这种豁免仅适用于 legend 元素本身，如果控件被包裹在 legend 的子元素中，则仍可能被禁用。开发者应确保控件直接位于 legend 元素内部，而不是被其他标签包裹。此外，开发者应确保这些控件能够正常交互，以验证其是否位于 legend 内部。这种技巧可以用于创建更复杂的表单布局，例如在标题中放置一个用于输入说明的文本框，或者一个用于调整标题样式的按钮。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。