how to make observable a css class with knockout js

Tags: javascript,jquery,html,css,knockout.js

Problem :

this is my code:


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


  background-color: green;
  background-color: red;


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

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

when i click on the disable button, the enabled css class is removed. At this point, i need to disable the textarea by KO observable viewModel.

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

Solution :

You need the click, css and text bindings :

    var viewModel= function () {
        var self = this;
        self.enableClick = function () {
        self.disableClick = function () {
        // 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());

The view :

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

<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

    CSS Howto..

    How to hide a parent div if an inner div has a certain class, with javascript

    How to convert complex xpath to css

    How do I change the css of a different element on hover?

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to switch between tabs using href?

    How does Twitter put labels inside textboxes?

    How to include more than one .css file in ASP.NET page?

    How to dynicamlly center the center of a div based on screen size

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    select the element before the last using nth child regardless of how many elements you have? [duplicate]

    If I use “getElementById” to alter a CSS style of a single object, how do I alter all elements that inherit the style?

    How to reset the CSS of HTML Elements?

    What is the best CSS trick to reduce how much HTML you need?

    CSS How to align checkbox image

    With Watin, how do I wait until an element gets a certain CSS class?

    How to align image with hr line with another image html CSS?

    Show or hide button text responsively in jQuery Mobile

    How to break a overflowed navigation bar via CSS

    Using two buttons on one div, how do you fade in slowly then fade out?

    How to change the CSS from the last child?

    How to test .css file for syntax errors?

    CSS: how to layout 3 columns, 2 are optional

    Django. how to apply css style on boolean form field?

    CSS - How to view computed font size?

    How to get CSS around links like login button

    How to hide submenu when user clicks option, but still display when user hovers over menu

    How can I align an image with css

    How to make link change the css in the following page [closed]

    Greasemonkey how to apply a CSS rule only for @media print?

    How do I make a (mock) bank system? [closed]