本文详解为何 `element.disabled = true` 在某些场景下失效，并提供完整可运行的解决方案，包括字符串解析、dom 时机控制、调试技巧及最佳实践。
在实际开发中，通过 JavaScript 动态禁用 元素是常见需求（例如：根据所选商品动态过滤可用尺码）。但许多开发者会遇到看似逻辑正确、却无法生效的问题——如 sizes[i].disabled = true 无反应。根本原因通常不是语法错误，而是DOM 访问时机不当、值解析不准确或元素状态被后续渲染覆盖。
? 核心问题分析
valueProductSizes.includes(...) 不可靠
你使用 product.Sizes 拼接为 "one, two, three" 字符串，再调用 .includes('one') —— 这会导致误匹配（如 'one' 会被 'one,two' 包含，但 'one ' 因空格无法匹配 'one'）。更严重的是，.includes() 是子字符串匹配，而非精确值匹配。DOM 元素未就绪（Timing Issue）
<script> 块写在 <input> 循环内部，且 displaySizes() 被 onchange 调用，但若 getElementsByName('sizes') 执行时相关 radio 元素尚未被浏览器解析（尤其在复杂 Razor 渲染中），将返回空 NodeList。</script>disabled 属性对 label 无效，且需同步更新 UI 可见性
禁用 后，其关联
✅ 正确实现方案（含修复版代码）
✅ 步骤 1：安全解析尺寸数组
function parseSizeValues(valueStr) {
return valueStr
.split(',')
.map(s => s.trim())
.filter(s => s.length > 0);
}✅ 步骤 2：确保 DOM 就绪 + 精确匹配
function displaySizes(productSizes) {
const valueProductSizes = parseSizeValues(productSizes.value);
const sizeInputs = document.querySelectorAll('input[name="sizes"]');
sizeInputs.forEach(input => {
// 精确判断：当前 size 是否存在于 product 的有效尺寸中
const isEnabled = valueProductSizes.includes(input.value);
input.disabled = !isEnabled;
// 可选：同步更新 label 样式（推荐）
const label = document.querySelector(`label[for="${input.id}"]`);
if (label) {
label.classList.toggle('disabled-label', !isEnabled);
}
});
}✅ 步骤 3：HTML 结构优化（关键！）
- 将 <script> 移至 </script>
