how to make observable a css class with knockout js


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

Problem :

this is my code:

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);
});

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 :

$(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());
});

The view :

<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


    CSS Howto..

    How to set two values for one css property?

    How to give slide down effect when hover?

    How do I add CSS styles to an ASP.NET UserControl from the code-behind?

    How to elasticity of the char length in javascript or css? [duplicate]

    How to organize css files in a Joomla 2.5 template? [closed]

    knockout.js how to bind dynamic css

    css how to set the tr that has a speicifc id

    css float: left clash/collision, how to avoid?

    How to override\edit Zurb Foundation base CSS styles?

    How to set the CSS class name dynamically in LessCSS?

    How to change CSS according to user Operating System

    How to change an image in CSS that has no class?

    How to write LESS specific to a controller/page in angular with ES6

    HTML/CSS - how to align boxes / divs [closed]

    How to use CSS to create an image overlay effect?

    How do I give a JavaFX TextField a Swing-style lowered bevel border?

    How to make a hyperlink navigation bar active in CSS or javascript?

    I can't figure out how to stop the margin-top from making my child div overflow its parent

    How do i vertically align my form in bootstrap?

    jQuery - Navbar hover did not show

    How to hyperlink CSS-made images? [closed]

    How to create a table inner bevel in HTML/CSS?

    How to remove unwanted whitespace css/html

    How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

    How to align social like buttons next to copyright text inside footer?

    How to do onclick in CSS to do transition on image?

    How I make my Dropdown Menu Fade-In Using CSS

    How to get content of particular column of html page after split using css-rule(-webkit-column-width:)

    SCSS, Compass and GULP: How to minify without breaking CSS?

    How to change drop-down menu to drop-up menu