如何使觀察到的與淘汰賽JS

Question

CSS類，這是我的代碼：

HTML：

<div> 
    <input type="button" id="btnEnable" value="Enable" /> 
    <input type="button" id="btnDisable" value="Disable" /> 
</div> 
<div id="myDiv">Some Text</div> 
<textarea rows="5" id="someText" data-bind="enable: enableText"></textarea> 

CSS：

.enabled{ 
    background-color: green; 
} 
.disabled{ 
    background-color: red; 
} 

的javascript：

$(document).ready(function() { 
    $("#myDiv").addClass("enabled").html(" Enabled"); 

    $("#btnEnable").click(function() { 
    $("#myDiv").removeClass("disabled"); 
    $("#myDiv").addClass("enabled").html(" Enabled"); 
    }); 
    $("#btnDisable").click(function() { 
    $("#myDiv").addClass("disabled").html(" Disabled"); 
    $("#myDiv").removeClass("enabled"); 
    }); 
    var viewModel = function(){ 
    enableText = ko.observable(true) 
    } 
    ko.applyBindings(viewModel); 
}); 

時我點擊禁用按鈕，啓用css類 已移除。此時，我需要通過KO observable viewModel禁用textarea。

var viewModel = function(){ 
    enableText = ko.observable(here must return false when the enable css class is removed) 
} 

Answer 1

您需要點擊，CSS和文本綁定：

$(document).ready(
    var viewModel= function() { 
     var self = this; 
     self.enableClick = function() { 
      self.enable(true); 
     }; 
     self.disableClick = function() { 
      self.enable(false); 
     }; 
     // Stores the enable state 
     self.enable = ko.observable(); 
     // Get a text representation of the state 
     self.enableText = ko.computed(function(){ 
      return self.enable() ? 'Enabled' : 'Disabled'; 
     }); 
    }; 
    ko.applyBindings(new viewModel()); 
}); 

的觀點：

<div> 
    <input type="button" data-bind="click: enableClick" value="Enable" /> 
    <input type="button" data-bind="click: disableClick" value="Disable" /> 
</div> 

<div data-bind="text: enableText, css :{'enabled' : enable,'disabled' : enable() != true }">Some Text</div> 
<textarea rows="5" id="someText" data-bind="enable: enable"></textarea> 

See fiddle