关于 knockout.js：如何启用/禁用选择标签并将其发布(即使已禁用)与淘汰


How to enable/disable select tag and post it (even if disabled) with knockout

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

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

我正在考虑采用稍微不同的方法：我想使用敲除(已在项目中使用)仅在数据可编辑时显示选择，否则显示只读输入(或 div/span)。

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

只需禁用选择就足以阻止它发布——您不必将其设为只读。这实际上非常简单。使用 attr 绑定，您可以有条件地应用属性。因此，您只需要一个为 select:

保存布尔状态的 observable

在你的视图模型中

1
self.DisableSelects = ko.observable(false);

您的选择绑定

1
attr: { disabled: DisableSelects }

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

1
viewModel.DisableSelects(true)

显然，如果您想要更大的粒度，您只需创建更多这样的可观察对象并适当地绑定即可。

编辑

您的问题并未明确说明您真正想要什么，但我感觉问题是您实际上确实希望发布该值，即使它已被禁用。对此，我必须同意链接问题的第一个答案：根本不要依赖发布的价值。将字段设置为只读或禁用不会阻止更改值。每个现代浏览器都内置了开发工具，让您可以就地更改 HTML(即删除 readonly 或 disabled 标志)，任何具有 HTML 基本知识的人都可以完成。如果您想要一个只读字段，那么完成此操作的唯一安全方法是完全忽略发布的值。您可以使用隐藏输入等进行各种技巧，但这也很容易解决。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
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 属性：

1
2
3
4
5
6
<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()"/>

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