Question

对于knockoutjs，我正在尝试做一些我认为相当简单且受到支持的事情，但我无法让它发挥作用。

我有三个复选框，称它们为A，B和C.我还根据这些复选框获得了我想要启用的选择/选项下拉列表，将它们称为字段1,2和3。 / p>

问题是，启用禁用映射是这样的：方框A已启用=字段1已启用，框B已启用=字段1和2已启用，框C已启用=字段3已启用。

我的HTML代码如下：

<div id="checkboxesContainer">
    <div>
    <!-- Label elements removed for smaller code -->
        <input id="main-checkbox-1" type="checkbox" data-bind="checked: box1" />
        <input id="main-checkbox-2" type="checkbox" data-bind="checked: box2" />
        <input id="main-checkbox-3" type="checkbox" data-bind="checked: box3" />
</div>
<div id="selectsContainer">
<!-- Label elements removed for smaller code -->
    <div>
        <select id="main-select-1" data-bind="options: workouts, optionsText: 'WorkoutName', value: selectedWorkout, enable: box1 || box2"></select>
    </div>
    <div>
        <select id="main-select-2" data-bind="enable: box2"></select>
    </div>
    <div>
        <select id="main-select-3" data-bind="enable: box3"></select>
    </div>
</div>

我的淘汰赛js查看用于启用选择的模型代码如下 - 我也缩短了它，因为与knockout.js相关的所有内容都在工作：

self.box1 = ko.observable(false);
self.box2 = ko.observable(false);
self.box3 = ko.observable(false);

我的启用如何：box1 ||当选中其中任何一个时，box2不启用该选择？我想避免订阅复选框observables的更改并尽可能自己翻转布尔值。

Answer 1

每当有多个条件时，请使用括号（例如box1（）|| box2（））。像这样绑定： -

   <select id="main-select-1" data-bind="options: workouts, optionsText: 'WorkoutName', value: selectedWorkout, enable: box1() || box2()"></select>

Fiddle Demo

Answer 2

为akhlesh +1，但我会更进一步，在viewModel上的计算内移动计算来清理HTML并将该信息保存在视图模型中

Fiddler Demo

<select id="main-select-1" data-bind="options: workouts, optionsText: 'WorkoutName', value: selectedWorkout, enable: enableSelect1"></select>



var vm = function () {
    var self = this;
    self.box1 = ko.observable(false);
    self.box2 = ko.observable(false);
    self.box3 = ko.observable(false);
    self.selectedWorkout = ko.observable();
    self.workouts = ko.observableArray([{
        WorkoutName: 'Workout 1'
    }, {
        WorkoutName: 'Workout 2'
    }, {
        WorkoutName: 'Workout 3'
    }, {
        WorkoutName: 'Workout 4'
    }, ]);

    self.enableSelect1 = ko.computed({
        read: function () {
            return self.box1() || self.box2();
        },
        deferEvaluation: true
    });
    return self;
}

Answer 3

尝试将box1 || box2放在括号内，如下所示：enable: (box1 || box2)。

knockoutjs在html上使用逻辑或启用绑定

3 个答案: