jQuery新增表格行时，如何根据下拉框初始值禁用AddOn选项？

你的核心问题是新插入行时无法根据食品分类下拉框的初始选中值禁用AddOn字段，之前的尝试失效主要有两个原因：一是代码存在语法错误导致DOM元素获取异常，二是未在DOM渲染完成且下拉框选项初始化后执行判断逻辑。

第一步：修正代码中的语法错误 #

你的原代码存在变量未定义、HTML标签闭合错误等问题，先修正这些基础问题：

var index = 0;
var FoodCategory = "FoodCategory" + index;
var AddOns = "AddOns" + index; // 补全AddOns变量定义
var tr = '<tr class="row">' + 
            '<td></td>'+ 
            '<td></td>'+ 
            '<td><select id="' + FoodCategory + '" class="form-control"></select><span id="FoodCat"></span></td>'+ // 修复select标签闭合错误、span的id多余引号
            '<td><span><select id="' + AddOns + '" class="form-control"></select></span><span id="AddOns"></span></td>'+ 
            '</tr>';
$("#tblFood").prepend(tr);

第二步：实现初始值判断与禁用逻辑 #

写一个通用函数来控制AddOn字段的禁用状态，既可以在插入行后处理初始选中值，也能在下拉框变更时复用：

// 通用控制函数：根据食品分类值切换AddOn的禁用状态
function setAddOnsDisabled(foodCatId, addOnsId) {
    var selectedCategory = $('#' + foodCatId).val();
    // 替换成你需要触发禁用的特定分类值，比如"non_addon"
    var shouldDisable = selectedCategory === "non_addon";
    $('#' + addOnsId).prop('disabled', shouldDisable);
}

然后在插入行并完成下拉框选项初始化后，立即调用这个函数：

// 假设你已经给FoodCategory下拉框填充了选项（这里示例添加带初始选中的选项）
$('#' + FoodCategory).append(`
    <option value="normal">普通食品</option>
    <option value="non_addon" selected>无需附加项</option>
`);

// 插入行后立即执行初始判断
setAddOnsDisabled(FoodCategory, AddOns);

// 绑定下拉框变更事件，后续修改分类时自动触发禁用逻辑
$('#' + FoodCategory).on('change', function() {
    setAddOnsDisabled(FoodCategory, AddOns);
});

为什么之前的方法无效？ #

1. 原代码中AddOns变量未定义，导致AddOn下拉框的id错误，无法正确获取元素；
2. 刚插入DOM时如果下拉框还没填充选项，$('#'+FoodCategory).val()会返回null或undefined，判断逻辑自然失效；
3. HTML标签的语法错误（比如select标签未正确闭合）会导致DOM结构异常，元素选择器无法正常工作。

内容的提问来源于stack exchange，提问作者user20565161