Readonly NumericTextBox - 禁用显示隐藏输入的点击事件答案

【问题标题】：Readonly NumericTextBox - disable the click event that shows the hidden inputReadonly NumericTextBox - 禁用显示隐藏输入的点击事件
【发布时间】：2014-07-09 05:06:43
【问题描述】：

我们使用 Kendo NumericTextBox 小部件向用户显示计算值。我们希望显示的值随着视图模型的变化而变化，但我们不希望用户能够编辑该值。

我们已经尝试过： - 禁用小部件。这会根据需要禁用用户交互，但不允许视图模型更新值。 - 将小部件设置为只读。这允许更新值，并且不允许用户直接更改值，但是当用户单击它时，小部件的外观会发生变化。

我们正试图找到一种介于这两者之间的方法，可以通过编程方式更改值，但不能由用户更改。并且当用户点击小部件时没有可见的效果。

这可以通过 Kendo NumericTextBox 实现吗？

编辑：问题在于通过序列化表单将视图模型的更改发送回服务器，并且禁用的输入不会包含在表单序列化中。正如 CodingWithSpike 所指出的，这不是小部件本身的问题。

【问题讨论】：

标签： kendo-ui

【解决方案1】：

在视图模型上设置时，小部件似乎更新正常，并且小部件被禁用。

See this example.

<input data-role="numerictextbox"
       data-format="c"
       data-min="0"
       data-max="100"
       data-bind="enabled: isEnabled,
                  value: selectedNumber">

<button type="button" data-bind="click: up">Incrament</button>

...

<script>
    var viewModel = kendo.observable({
        selectedNumber: 0,
        isEnabled: false,
        up: function () { viewModel.set("selectedNumber", viewModel.selectedNumber + 1); }
    });
    kendo.bind($("#example"), viewModel);
</script>

【讨论】：

哦，感谢您指出这一点。原来我记错了小部件是如何工作的。你是对的，我现在找到了一个基于此的解决方法。

【解决方案2】：

在向用户呈现页面时禁用小部件 - 当从其他输入重新计算它们时，这仍会显示更新的值。然后在将表单序列化回服务器之前重新启用小部件。

【讨论】：