有复选框时如何使用敲除启用和禁用输入字段？

Question

我有一个复选框字段和一个输入字段 (endDate)。我想启用和禁用 endDate 取决于复选框值（选中复选框时，endDate 被禁用，反之亦然）。我的输入和复选框元素如下：

<input id="inUse" type="checkbox" data-bind="checked: inUse"/>
<input id="endDate" data-bind="datepicker: enDate, enable: enableEndDate"/>

启用结束日期：

self.enableEndDate = ko.computed(function(){
     return !inUse();
    }
});

页面加载时，取决于inUse 字段值，endDate 将被启用或禁用。当我取消选中inUse 时，endDate 将被启用。 现在我想在用户单击它时启用禁用的endDate，然后同时将inUse 的值更改为未选中。如何绑定这两种方式的过程？

Answer 1

您的要求是：

• 如果用户单击inUse 复选框，文本框应启用或禁用，具体取决于复选框状态
• 如果文本框被禁用，并且用户单击它，则应该启用文本框并选中复选框

首先，如果您禁用文本框，它不会抛出事件，因此无法知道用户何时单击它。因此，您需要使用readonly，而不是disabled。单击只读文本框时，会触发单击事件。

Knockout 没有只读绑定。您可以使用通用的attr 绑定，或者创建一个readonly 处理程序，这非常简单：

// Add new binding handler for readonly
ko.bindingHandlers['readonly'] = {
    'update': function (element, valueAccessor) {
        var value = !!ko.utils.unwrapObservable(valueAccessor());
        if(value !== element.readOnly)
            element.readOnly = value;
    }
};

这必须在加载敲除库之后和绑定视图模型之前运行。您可以将readonly 用作任何内置处理程序。

此外，您还可以修改 CSS 以明确禁用文本框，例如：

/* Make visible when the control is disabled */
input[readonly] {
    background-color: #EEE;
}

那么，接下来的故事就很简单了。这是视图模型和绑定：

var vm = (function() {
    var inUse = ko.observable(false);
    var endDate = ko.observable(null);
    var endDateClick = function() {
        console.log('Clicked!');
        if (!inUse()) inUse(true);
    };
    return {
        inUse: inUse,
        endDate: endDate,
        endDateClick: endDateClick
    }
})();

ko.applyBindings(vm);

这是对应的 HTML：

<input id="inUse" type="checkbox" data-bind="checked: inUse"/>
<input id="endDate" data-bind="value: endDate, readonly: !inUse(), click: endDateClick"/>

您可以在 this fiddle 中看到它的工作原理。或直接：

// Add new binding handler for readonly
ko.bindingHandlers['readonly'] = {
    'update': function (element, valueAccessor) {
        var value = !!ko.utils.unwrapObservable(valueAccessor());
        if(value !== element.readOnly)
            element.readOnly = value;
    }
};

var vm = (function() {
    var inUse = ko.observable(false);
    var endDate = ko.observable(null);
    var endDateClick = function() {
        console.log('Clicked!');
        if (!inUse()) inUse(true);
    };
    return {
        inUse: inUse,
        endDate: endDate,
        endDateClick: endDateClick
    };
})();

ko.applyBindings(vm);

/* Make visible when the control is disabled */
input[readonly] {
    background-color: #EEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="inUse" type="checkbox" data-bind="checked: inUse"/>
<input id="endDate" data-bind="value: endDate, readonly: !inUse(), click: endDateClick"/>