2つの入力フィールドの値を比較して要素を有効/無効にします

Question

2つの入力フィールド値があり、最初の入力値が2番目の入力値より大きい場合、どのようにボタンを無効にすることができますか？これは最初の文字でのみ機能しますが、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>

Answer 1

送信ボタン上のデータ-bind属性に誤りがあります。これに

data-bind = "click: addition" enable="temp1() < temp2()" 

：これを変更

data-bind = "click: addition, enable:Number(temp1()) < Number(temp2())" 

また、Numberコンストラクタで観測可能に巻き付けて値が数値であることを強制します。 the enable binding