Binding to css class using knockout?

Question

I'm using some bootstrap related js that enables the use of checkboxes through html like:

<div class="checkbox">
  <label class="checkbox-custom">
    <input type="checkbox" name="checkboxA" checked="checked">
    <i class="icon-unchecked checked"></i>
    Item one checked
  </label>
</div>

<div class="checkbox"> 
  <label class="checkbox-custom"> 
    <input type="checkbox" name="checkboxB" id="2"> 
    <i class="icon-unchecked"></i> 
    Item two unchecked
  </label> 
</div>

Normally I could bind onto the input, but the script that handles this only changes the i checked css class. How do I do something on a change on the adding/removing of .checked on i?

Answer 1

Late to this but you would have to set a flag in the ViewModel and then based on the click switch your class with css binding.

<i class="checked" data-bind='css: { "nameOfYourCSS" : conditions_here } '></i>

Here's the example. I've set the css to the p tag instead because apparently you can't style checkboxes and that's exactly the reason why you might be using Bootstrap.

http://jsfiddle.net/jX6m2/3/