Question

我有一个复杂的表单，其中包含许多选项，其状态（启用/禁用）取决于某些其他控件的值，因此在提交表单时可能会禁用这些选项（并且未发布选择值）。即使在不允许用户更改选择的情况下，我也需要发布所选值。

我在这里看到了一些解决方案HTML form readonly SELECT tag/input（主要是解决方案是将隐藏字段与禁用的选择同步）。

我正在考虑采用稍微不同的方法：我想使用knockout（已在项目中使用）仅在数据可编辑时显示select，否则显示readonly输入（或div / span）。

如何使用knockout来简化这种方法？

Answer 1

简单地禁用选择就足以阻止它发布 - 您不必将其设为只读。这实际上是非常简单的。使用attr绑定，您可以有条件地应用属性。所以你需要的是一个observable，它为select选择了一个布尔状态：

在您的视图模型中

self.DisableSelects = ko.observable(false);

您的选择绑定

attr: { disabled: DisableSelects }

然后，当你想要禁用任何像这样绑定的选择时，你只需将observable设置为true：

viewModel.DisableSelects(true)

显然，如果你想要更大的粒度，你只需创建更多这样的observable并适当绑定。

修改

你的问题没有明确说明你真正想要的是什么，但我觉得问题是你实际上做想要发布的价值，即使它被禁用了。在此，我必须同意关联问题的第一个答案：不要依赖于那里的公布价值。只读或禁用字段不会阻止值被更改。每个现代浏览器都内置了开发工具，让您可以在适当的位置更改HTML（即删除只读或禁用的标志），任何拥有HTML基本知识的人都可以将其删除。如果您只想要一个字段，那么唯一可以安全的方法是完全忽略发布的值。你可以用隐藏的输入做各种各样的技巧，但也可以轻松搞定。

Answer 2

在我的viewModel中，我定义了相对于select状态的属性，绑定到select值的属性和一个计算的observable，它“读取”select中所选选项的描述：

AppViewModel: function () {
        var self = this;
        self.SelectVisible = ko.computed(function () {
            return true;  // return true or false depending on your context
        }, self);
        self.Category = ko.observable("");
        self.CategoryText = ko.computed(function () {
            return $("#Category option[value='" + self.Category() + "']").text();
        }, self);
        // other code ...
}

在页面中，我有一个选择始终启用和只读输入，其可见性是相互独立的，取决于viewModel属性：

<select name="Category" id="Category" data-bind="value: Category, visible: SelectVisible">
   <option value="S">Standard</option>
   <option value="N">CatN</option>
   <option value="C">CatC</option>
</select>
<input style="display: none;" type="text" readonly="readonly" data-bind="value: CategoryText, visible: !SelectVisible()"/>

Answer 3

您可以将淘汰视图模型变量“IsDisable”绑定到选择列表

如何启用/禁用选择标记并使用knockout发布它（即使已禁用）

3 个答案: