如何用Knockout JS禁用HTML表格中满足条件的<tr>行？

这问题我之前也遇到过，用Knockout的响应式特性就能轻松搞定，给你两种实用方案参考：

方案一：直接绑定禁用条件到每个Input #

这种方式直观易懂，适合简单场景。核心思路是给每行数据定义一个计算属性，判断是否满足禁用条件，然后把这个属性绑定到该行所有input的disable上。

1. 定义ViewModel #

// 每行数据的构造函数
function RowData(month, savings) {
    this.month = ko.observable(month);
    this.savings = ko.observable(savings);
    
    // 自定义禁用条件（这里示例：当月份为"January"时禁用整行）
    this.isRowDisabled = ko.computed(() => {
        // 你可以替换成任何自己需要的条件，比如：
        // return this.savings() < 100; // 当储蓄小于100时禁用
        return this.month() === "January";
    });
}

// 主ViewModel
function TableViewModel() {
    this.tableRows = ko.observableArray([
        new RowData("January", 150),
        new RowData("February", 200),
        new RowData("March", 80)
    ]);
}

// 应用绑定
ko.applyBindings(new TableViewModel());

2. HTML表格代码 #

<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: tableRows">
        <tr>
            <td><input type="text" data-bind="value: month, disable: isRowDisabled"></td>
            <td><input type="number" data-bind="value: savings, disable: isRowDisabled"></td>
        </tr>
    </tbody>
</table>

方案二：自定义绑定简化代码 #

如果表格列很多，每个input都写disable绑定太繁琐，可以自定义一个Knockout绑定，一次性禁用整行的所有input。

1. 注册自定义绑定 #

ko.bindingHandlers.disableRowInputs = {
    update: function(element, valueAccessor) {
        // 解析是否需要禁用的状态
        const shouldDisable = ko.unwrap(valueAccessor());
        // 获取当前行内所有input元素
        const inputs = element.querySelectorAll('input');
        // 批量设置禁用状态
        inputs.forEach(input => {
            input.disabled = shouldDisable;
        });
    }
};

2. 修改HTML代码 #

只需要给<tr>绑定自定义属性，不用再给每个input加disable：

<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: tableRows">
        <tr data-bind="disableRowInputs: isRowDisabled">
            <td><input type="text" data-bind="value: month"></td>
            <td><input type="number" data-bind="value: savings"></td>
        </tr>
    </tbody>
</table>

关键说明 #

• 计算属性isRowDisabled会自动追踪依赖的可观察对象（比如month或savings），当这些值变化时，禁用状态会自动更新，完全符合Knockout的响应式逻辑。
• 你可以根据业务需求随意修改isRowDisabled里的判断条件，支持多字段组合判断（比如this.month() === "January" && this.savings() > 200）。

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