如何用ko.observable()在Knockout.js中禁用复选框？含条件场景

我来帮你搞定Knockout.js里用ko.observable()控制复选框禁用的问题，分两种场景给你详细说明：

在Knockout中，复选框的disabled绑定可以直接关联一个ko.observable()变量。当这个observable的值为true时，复选框就会被禁用；设为false则恢复可用。

举个简单例子：

// 定义一个控制禁用状态的observable，初始值为false（可用）
const isCheckboxDisabled = ko.observable(false);

// 可以随时修改这个值来切换状态，比如按钮点击触发
function toggleDisable() {
  isCheckboxDisabled(!isCheckboxDisabled());
}

ko.applyBindings({
  isCheckboxDisabled: isCheckboxDisabled,
  toggleDisable: toggleDisable
});

对应的HTML：

<input type="checkbox" data-bind="disabled: isCheckboxDisabled"> 示例复选框
<button data-bind="click: toggleDisable">切换禁用状态</button>

如果要基于某个值（比如一个ko.observable()的value）来动态判断是否禁用，有两种常用方式：

方式1：使用ko.computed()计算禁用状态 #

这种方式适合逻辑比较复杂的场景，把判断逻辑封装成一个计算属性，自动响应value的变化：

// 定义目标value的observable，初始值随便设，比如1
const targetValue = ko.observable(1);

// 计算属性：当targetValue等于3时返回true（禁用），否则false
const shouldDisableCheckbox = ko.computed(() => {
  return targetValue() === 3;
});

// 模拟修改targetValue的场景，比如按钮点击切换值
function changeValue(newValue) {
  targetValue(newValue);
}

ko.applyBindings({
  targetValue: targetValue,
  shouldDisableCheckbox: shouldDisableCheckbox,
  changeValue: changeValue
});

对应的HTML：

<input type="checkbox" data-bind="disabled: shouldDisableCheckbox"> 条件禁用复选框
<button data-bind="click: () => changeValue(2)">设为2（可用）</button>
<button data-bind="click: () => changeValue(3)">设为3（禁用）</button>

方式2：直接在绑定表达式中写判断逻辑 #

如果逻辑很简单，也可以直接在data-bind里写表达式，省去计算属性的定义：

const targetValue = ko.observable(1);

function changeValue(newValue) {
  targetValue(newValue);
}

ko.applyBindings({
  targetValue: targetValue,
  changeValue: changeValue
});

对应的HTML：

<input type="checkbox" data-bind="disabled: targetValue() === 3"> 条件禁用复选框
<button data-bind="click: () => changeValue(2)">设为2（可用）</button>
<button data-bind="click: () => changeValue(3)">设为3（禁用）</button>

注意点 #

• 如果你的value是普通变量而不是observable，那直接写value === 3就行，但如果是observable，一定要加()来获取当前值（比如targetValue()），否则判断的是observable对象本身，不是它的值。
• 两种方式都能实现需求，计算属性更适合逻辑复杂或者需要复用判断逻辑的场景，直接写表达式则更简洁。

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