Question

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

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

enableEndDate：

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

加载页面时，取决于inUse字段值，endDate将启用或禁用。当我取消选中inUse时，endDate将被启用。现在，我希望在用户点击它时启用已禁用的endDate，然后将inUse的值更改为同时取消选中。我怎样才能绑定这个双向过程？

Answer 1

您的要求是：

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

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

Knockout没有readonly绑定。您可以使用通用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中看到它正常工作。或直接：

＆＃13;

// 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);

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

如果有复选框，如何使用knockout启用和禁用输入字段？

1 个答案: