如何在淘汰赛中显示 DOM 但禁用点击功能？答案

【问题标题】：How to show DOM but disable click functionality in knockout?如何在淘汰赛中显示 DOM 但禁用点击功能？
【发布时间】：2018-10-09 04:17:08
【问题描述】：

我想向客户显示 checkox 和标签，但在某些情况下禁用点击功能。这是我的html代码：

<input type="checkbox" name="billing-address-same-as-shipping"
       data-bind="checked: isAddressSameAsShipping, disable: disableBillingSameAsShipping(), click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-' + getCode($parent)}"/>
<label data-bind="disable: disableBillingSameAsShipping(), attr: {for: 'billing-address-same-as-shipping-' + getCode($parent)}"><span
        data-bind="i18n: 'My billing and shipping address are the same'"></span></label>

这是一个返回真假的函数：

disableBillingSameAsShipping: function () {
    if(quote.shippingAddress().city == undefined) {
         return true;
    }
    return false;
}

如果disableBillingSameAsShipping函数返回true输入框和标签在页面上不可见。

我如何自定义它，以便当返回值为 true 时，复选框和标签在页面上应该是可见的，但两者都应该禁用单击/选择功能？

【问题讨论】：

这没有意义……控制台有错误吗？
我在控制台中没有看到任何错误。

标签： knockout.js

【解决方案1】：

您在实际的<input> 上使用disable 绑定，而不是在它的标签上。

const checked = ko.observable(false);
const disable = ko.observable(true);

ko.applyBindings({ checked, disable });

input[disabled] { opacity: .5 };

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div>
  <label>
    <input type="checkbox" data-bind="checked: disable">
    Checkbox below is disabled
  </label>
</div>
<hr/>
<div>
  <label>
    <input type="checkbox" data-bind="checked: checked, disable: disable">
    This checkbox is <span data-bind="text: disable() ? 'disabled' : 'enabled'"></span>
  </label>
</div>

【讨论】：

【解决方案2】：

label 标签中不需要数据绑定。简单地说，对input 标签执行以下操作（使用enable 绑定）：

<input type="checkbox" name="billing-address-same-as-shipping" data-bind="checked: isAddressSameAsShipping, enable: !disableBillingSameAsShipping(), click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-' + getCode($parent)}"/>

这应该是label 绑定：

<label data-bind="attr: {for: 'billing-address-same-as-shipping-' + getCode($parent)}"><span data-bind="i18n: 'My billing and shipping address are the same'"></span></label>

【讨论】：