Aktivieren/Deaktivieren von Elementen durch Vergleichen von Werten in zwei Eingabefeldern

Question

Ich habe zwei Eingabefeldwerte und frage mich, wie ich eine Schaltfläche deaktivieren kann, wenn der erste Eingabewert größer als der zweite Eingabewert ist. Es funktioniert nur mit dem ersten Buchstaben, aber mehr als 2 Nummern funktionieren nicht.

<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

gibt es einen Fehler in den Daten-bind-Attribut auf den Absenden-Button. Ändern Sie dies:

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

dazu:

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

Zusätzlich die beobachtbare in der Anzahl Konstruktor Einwickeln zwingt den Wert eine Zahl zu sein. Hier ist die Dokumentation für the enable binding