如何启用/禁用选择标签并通过淘汰赛发布(即使禁用)
Posted
技术标签:
【中文标题】如何启用/禁用选择标签并通过淘汰赛发布(即使禁用)【英文标题】:How to enable/disable select tag and post it (even if disabled) with knockout 【发布时间】:2013-04-12 22:56:14 【问题描述】:我有一个复杂的表单,其中包含许多选择,其状态(启用/禁用)取决于其他一些控件的值,因此在提交表单时可能会禁用这些选择(并且未发布选择值)。即使在不允许用户更改选择的情况下,我也需要发布所选值。
我在这里看到了一些解决方案html form readonly SELECT tag/input(主要解决方案是让隐藏字段与禁用的选择同步)。
我正在考虑采取稍微不同的方法:我想使用敲除(已在项目中使用)仅在数据可编辑时显示选择,否则显示只读输入(或 div/span)。
如何使用敲除来简化这种方法?
【问题讨论】:
【参考方案1】:您可以将淘汰视图模型变量“IsDisable”绑定到选择列表
【讨论】:
【参考方案2】:只需禁用选择就足以阻止它发布 - 您不必将其设为只读。这实际上非常简单。使用attr
绑定,您可以有条件地应用属性。所以你只需要一个为选择保存布尔状态的可观察对象:
在您的视图模型中
self.DisableSelects = ko.observable(false);
您的选择绑定
attr: disabled: DisableSelects
然后,当您希望禁用任何像这样绑定的选择时,您只需将 observable 设置为 true:
viewModel.DisableSelects(true)
显然,如果您想要更大的粒度,您只需创建更多这样的可观察对象并适当地绑定即可。
编辑
您的问题并未明确说明您真正想要什么,但我感觉问题是您实际上确实想要发布该值,即使它已被禁用。对此,我必须同意链接问题的第一个答案:根本不要依赖发布的价值。将字段设置为只读或禁用不会不阻止值被更改。每个现代浏览器都内置了开发工具,让您可以就地更改 HTML(即删除 readonly 或 disabled 标志),任何具有 HTML 基本知识的人都可以完成。如果您想要一个只读字段,那么唯一安全的方法是完全忽略发布的值。您可以使用隐藏输入等进行各种技巧,但这也很容易解决。
【讨论】:
是的,我确实希望发布该值,即使它已被禁用。对不起,我不是那么明确,我会编辑这个问题。我没有安全问题,因为我的应用程序是一个以数据为中心的内网应用程序,但我会更加关注您强调的问题。谢谢! 好吧,尽管安全性可能不是问题,但最好将任何应用程序视为可能受到损害,除非您停止担心对于一个应用程序,您可能不记得真正为下一个将重要的应用程序担心它。【参考方案3】:在我的 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()"/>
【讨论】:
以上是关于如何启用/禁用选择标签并通过淘汰赛发布(即使禁用)的主要内容,如果未能解决你的问题,请参考以下文章