ノックアウトの請求/発送チェックボックスと同じ

Question

こんにちは、ちょうどノックアウトの請求書チェックボックスと同じようにしようとしています。ここに私の例である：

http://jsfiddle.net/neosketo/kmwpop19/1/

私のJavascriptをjQueryのに働くだろうが、私はjqueryのを使用したくない：

var MainViewModel = function() { 
var self = this; 
self.States = ko.observableArray([{Value:"CA",Name:"California"}, 
                    {Value:"FL",Name:"Florida"}, 
            {Value:"NY",Name:"New York"}, 
            {Value:"VG",Name:"Virginia"}, 
            {Value:"TX",Name:"Texas"} 
           ]); 


    self.SelectedState = ko.observable(); 
    self.SelectedShippingState = ko.observable(); 

self.myValue = ko.observable(false); 
self.myAction = function() { 
      if (self.myValue) { 
     this.SelectedShippingState().Value = this.SelectedState().Value; 
    } else { 
     self.SelectedShippingState().Value = null; 
    }  
    return true; 
}; 



    } 
    ko.applyBindings(new MainViewModel()); 

Answer 1

はcheckedとclickバインディングの両方を使用しないでください。

<input type="checkbox" data-bind="checked: myValue, click: myAction" /> Same as Billing<br/> 

あなたは変数にあるチェックボックスをバインドしたら、変化に対応するためにそれを購読するには：

self.myValue.subscribe(function(newValue) { 
    if (newValue) { 
    self.SelectedShippingState(self.SelectedState()); 
    } else { 
    self.SelectedShippingState(null); 
    } 
}); 

が使用するものに関して、あなたのコードと他の多くの問題を持っていました拘束力があり、Valueが場に出る。ここでは修正される：このチェックボックスをオンにしてから最初のプルダウンを変更した場合、彼らは同期に滞在していないことを

var MainViewModel = function() { 
 
    var self = this; 
 
    self.States = ko.observableArray([{ 
 
    Value: "CA", 
 
    Name: "California" 
 
    }, { 
 
    Value: "FL", 
 
    Name: "Florida" 
 
    }, { 
 
    Value: "NY", 
 
    Name: "New York" 
 
    }, { 
 
    Value: "VG", 
 
    Name: "Virginia" 
 
    }, { 
 
    Value: "TX", 
 
    Name: "Texas" 
 
    }]); 
 

 

 
    self.SelectedState = ko.observable(); 
 
    self.SelectedShippingState = ko.observable(); 
 

 
    self.myValue = ko.observable(false); 
 
    self.myValue.subscribe(function(newValue) { 
 
    if (newValue) { 
 
     self.SelectedShippingState(self.SelectedState()); 
 
    } else { 
 
     self.SelectedShippingState(null); 
 
    } 
 
    return true; 
 
    }); 
 
} 
 
ko.applyBindings(new MainViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
Billing State: 
 
<select data-bind="options: States, optionsText: 'Name', optionsValue: 'Value', value: SelectedState, optionsCaption: 'Choose a Billing State'"></select> 
 
<hr/> 
 
<input type="checkbox" data-bind="checked: myValue" />Same as Billing 
 
<br/>Shipping State: 
 
<select data-bind="options: States, optionsText: 'Name', optionsValue: 'Value', value: SelectedShippingState, optionsCaption: 'Choose a Shipping State'"></select> 
 
<br>

注意を。それは、2番目が計算されることを必要とするでしょう。