通过比较两个输入字段中的值来启用/禁用元素
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过比较两个输入字段中的值来启用/禁用元素相关的知识,希望对你有一定的参考价值。
我有两个输入字段值,我想知道如果第一个输入值大于第二个输入值,我怎么能禁用一个按钮。它仅使用第一个字母,但超过2个数字不起作用。
<button type="submit" data-bind="click: addition, enable:temp1() > temp2()" >Click here for addition</button>
function ViewModel () {
var self = this;
self.var1 = ko.observable(0);
self.var2 = ko.observable(0);
self.temp1 = ko.observable(self.var1())
self.temp2 = ko.observable(self.var2())
this.addition = function() {
self.var1(Number(self.temp1()));
self.var2(Number(self.temp2()));
this.var3 = self.var1() + self.var2();
alert("Addition is = "+ this.var3 );
};
};
var vm = new ViewModel();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>First #: <span data-bind = "text: var1" > </span></p>
<p>Sectond #: <span data-bind = "text: var2" > </span></p>
<p>Enter first #: <input data-bind = "value: temp1" /></p>
<p>Enter second #: <input data-bind = "value: temp2" /></p>
<p><button type = "submit" data-bind = "click: addition" enable="temp1() < temp2()" >Click here for addition</button></p>
答案
在提交按钮上的数据绑定属性中存在错误。改变这个:
data-bind = "click: addition" enable="temp1() < temp2()"
对此:
data-bind = "click: addition, enable:Number(temp1()) < Number(temp2())"
此外,将Observable包装在Number构造函数中会强制该值为数字。这是the enable binding的文档
以上是关于通过比较两个输入字段中的值来启用/禁用元素的主要内容,如果未能解决你的问题,请参考以下文章