动态启用/禁用Toggle按钮：设置IsItNeeded为false后按钮未禁用

看起来你遇到了两个核心问题：绑定语法错误，以及Bootstrap Toggle组件和Knockout原生enable绑定不兼容。咱们一步步来解决：

1. 先修复HTML绑定的语法错误 #

你的代码里css绑定和enable绑定之间少了一个逗号，这会导致Knockout无法正确解析绑定规则。修改后的HTML应该是：

<div class="toggle btn btn-default" data-toggle="toggle" data-bind="toggle: address(), css:{off:!address()}, enable: IsItNeeded()">
  <div class="toggle-group">
    <label class="btn btn-primary toggle-on">On</label>
    <label class="btn btn-default active toggle-off">Off</label>
    <span class="toggle-handle btn btn-default"></span>
  </div>
</div>

2. 解决Bootstrap Toggle不响应enable绑定的问题 #

Bootstrap Toggle是基于Bootstrap的自定义UI组件，Knockout的原生enable绑定只会操作DOM元素的disabled属性，但这个组件需要调用自身的API才能切换禁用状态。咱们可以写一个自定义Knockout绑定来适配它：

第一步：创建自定义绑定 #

在你的ViewModel代码之前添加这个绑定逻辑：

ko.bindingHandlers.bootstrapToggleEnable = {
    update: function(element, valueAccessor) {
        // 获取IsItNeeded的当前值
        var isEnabled = ko.unwrap(valueAccessor());
        // 调用Bootstrap Toggle的API切换启用/禁用状态
        $(element).bootstrapToggle(isEnabled ? 'enable' : 'disable');
    }
};

第二步：替换HTML里的enable绑定 #

把原来的enable: IsItNeeded()换成自定义的绑定：

<div class="toggle btn btn-default" data-toggle="toggle" data-bind="toggle: address(), css:{off:!address()}, bootstrapToggleEnable: IsItNeeded()">
  <!-- 内部元素保持不变 -->
</div>

3. 确保ViewModel里的IsItNeeded是Observable #

这一点至关重要！如果IsItNeeded不是Knockout的可观察对象，当它的值变化时，Knockout无法自动触发UI更新。你的ViewModel应该类似这样：

function YourViewModel() {
    var self = this;
    self.address = ko.observable(false);
    // 必须定义为observable，才能实时响应值的变化
    self.IsItNeeded = ko.observable(false);
}

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

额外优化：整合Toggle状态和启用状态的绑定 #

如果你想让代码更简洁，可以写一个整合的自定义绑定，同时处理Toggle的选中状态和启用状态：

ko.bindingHandlers.bootstrapToggle = {
    init: function(element, valueAccessor, allBindings) {
        // 初始化Bootstrap Toggle组件
        $(element).bootstrapToggle();
        
        // 监听组件的toggle事件，同步更新ViewModel里的address值
        $(element).on('toggle', function() {
            var value = valueAccessor();
            value($(this).prop('checked'));
        });
    },
    update: function(element, valueAccessor, allBindings) {
        // 更新Toggle的选中状态
        var isChecked = ko.unwrap(valueAccessor());
        $(element).bootstrapToggle(isChecked ? 'on' : 'off');
        
        // 更新Toggle的启用状态
        var isEnabled = ko.unwrap(allBindings.get('enable'));
        $(element).bootstrapToggle(isEnabled ? 'enable' : 'disable');
    }
};

然后HTML可以简化成：

<div class="toggle btn btn-default" data-bind="bootstrapToggle: address(), enable: IsItNeeded()">
</div>

（注：使用这个整合绑定后，不需要手动编写内部的toggle-group元素，Bootstrap Toggle会自动生成）

这样修改后，当你把IsItNeeded设为false时，Toggle按钮就会被正确禁用了。

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