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

knockoutjs use logical or with enable binding on html

本文关键字：启用 绑定 html knockoutjs      更新时间：2023-09-26

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

我有三个复选框，分别称为A、B和C。我还有一个选择/选项下拉列表，我想基于这些复选框启用它们，称为字段1、2和3。

问题是，启用-禁用映射如下所示：方框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>

下面是我的knockout.js视图模型代码，用于启用选择-我也缩短了它，因为与knockoutjs相关的一切都在工作：

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

为什么我的enable:box1||box2在选中其中任何一个时都不启用选择？如果可能的话，我希望避免订阅复选框Observable的更改，也避免自己翻转布尔值。

只要有多个条件，就使用括号（例如box1（）||box2（））。使绑定像这样：-

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

Fiddle演示

对于akhlesh，

+1，但我会更进一步，将计算移动到viewModel上的computed中，以清理HTML并将该信息保留在视图模型中

小提琴手演示

<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;
}

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

相关文章：