如何跟蹤輸入複選框檢查狀態

Question

我得到了李的名單，他們是排序與jQuery UI，和IM試圖使列表排序或禁用排序

如果輸入被檢查=啓動排序， 如果輸入選中=禁用排序

這是我到目前爲止有：

<ul id="sortable" style="list-style:none"> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
</ul> 

<br /> 

<label>Sort <input type="checkbox" data-bind="checked: IsChecked"/></label 

JS：

function viewModel(){ 
    self = this; 
    self.button = ko.observable(); 
    self.IsChecked = ko.observable(); 

    self.enableDrag = function(){ 
     $("#sortable").sortable(); 
    console.log("checked"); 
    } 
    self.disableDrag = function(){ 
    $("#sortable").sortable(); 
    $("#sortable").sortable("disable"); 
    } 
    self.sort = function(){ 
    if(self.IsChecked()){ 
     self.enableDrag(); 
    }else{ 
     self.disableDrag(); 
    } 
    } 
    self.sort(); 
}; 

var myViewModel = new viewModel(); 
ko.applyBindings(myViewModel); 

Answer 1

選中該複選框將改變.IsChecked屬性，但就是這樣。你可以「訂閱」的事件處理程序，以可觀察到的，所以你可以運行代碼時，它的價值變化：

self.IsChecked.subscribe(function (newBool) { 
    console.log(newBool); 
    self.sort(); 
}); 

這將僅火當值的變化。在複選框的情況下，每次單擊元素時都會發生這種情況，因爲它是一個布爾值。

見明確訂閱的可觀的文檔中瞭解更多詳情：http://knockoutjs.com/documentation/observables.html

你也可以做到這一點與自定義綁定的可重用性： http://knockoutjs.com/documentation/custom-bindings.html