本文详解为何 `element.disabled = true` 在动态生成的 radio 元素上失效，并提供完整可运行的解决方案，涵盖 dom 加载时机、字符串解析陷阱、属性设置验证及现代替代写法。
在 ASP.NET Razor 页面中动态控制 radio 按钮的启用/禁用状态时，常见问题并非 JavaScript 语法错误，而是执行时机与数据格式不匹配导致的“看似无效”。你遇到的 sizes[i].disabled = true 不生效，根本原因通常有以下三点：
✅ 1. DOM 尚未就绪（最常见！）
你的
✅ 正确做法：将逻辑封装并延迟到 DOM 加载完成
✅ 2. 字符串解析错误（隐藏陷阱）
Razor 中 @string.Join(" ,", product.Sizes) 生成的是 "S ,M ,L"，而 value.includes("S") 会误匹配（因 "S " 包含 "S"）。includes() 在子串匹配场景下不可靠。
立即学习“Java免费学习笔记（深入）”；
✅ 推荐改用 Array.includes() + 精确解析：
// ❌ 危险（子串匹配）：
// if (!valueProductSizes.includes(sizes[i].value))
// ✅ 安全（精确值匹配）：
const availableSizes = productSizes.value
.split(',')
.map(s => s.trim());
if (!availableSizes.includes(radio.value)) { ... }✅ 3. 忘记启用之前被禁用的元素
首次调用 displaySizes() 可能禁用部分按钮，但切换到另一个产品时，未启用之前被禁用的按钮，导致状态累积错误。务必在每次调用中先重置所有 radio 的 disabled 状态：
sizeRadios.forEach(radio => {
radio.disabled = !availableSizes.includes(radio.value);
if (radio.disabled) radio.checked = false;
});✅ 完整 HTML 结构建议（确保可执行）
@foreach (var size in Model.AvailableSizes) { }@foreach (var product in Model.Products) { var sizeCsv = string.Join(",", product.Sizes); // 用英文逗号，无空格 }
? 调试技巧
- 在控制台执行 document.querySelectorAll('input[name="sizes"]').length 验证元素是否存在；
- console.log(availableSizes, radio.value, availableSizes.includes(radio.value)) 三连查；
- 检查浏览器开发者工具 Elements 面板，确认 disabled 属性是否真实写入（而非仅 JS 属性）。
总结：disabled = true 本身永远有效，失效必因 DOM 未就绪、数据解析错误、状态未重置 三者之一。采用 DOMContentLoaded + trim() 解析 + 全量状态管理，即可 100% 解决。
