Knockout - How to bind outer container css from set of checkboxes?


Tags: javascript,css,twitter-bootstrap,knockout.js

Problem :

OK, admittedly horrible grammar in the question, but here's the lowdown:

I'm using the following in my site:

  • Twitter Bootstrap
  • Knockout
  • Durandal

I'm trying to add a css class to the outer label surrounding a checkbox (in a list of checkboxes) so it can highlight the selected checkboxes. Essentially the code is this:

<div data-bind="foreach:values">
    <label class="checkbox inline btn" data-bind="css: { }">
        <input type="checkbox" data-bind="attr: { value: text }, checked: $parent.checkedValues" /> 
        <span data-bind="text: text"></span>
    </label>
</div>

So, what I'm trying to do is to add the btn-primary class to the outer label for the checkboxes that are checked. Rather than put the full viewmodel in here, I've created a Fiddle: http://jsfiddle.net/riceboyler/WEPRZ/1/

I recognize that I can use the $data object to get the current item, but I can't figure out how to check and see if the current item ($data.text) is in the checkedValues observableArray. I'm sure it's probably basic Javascript that I'm missing, but is there any way to do this without using a computed value?



Solution :

You can do this directly in the css binding by inspecting the parent's checkedValues array.

<label 
    class="checkbox inline btn" 
    data-bind="css: {'btn-primary': $parent.checkedValues.indexOf(text) > -1}">

See the Fiddle


    CSS Howto..

    How to create color custom scrollbar in pure css? [closed]

    How can I apply a style to element if the user came to website using a link with an anchor/hash [closed]

    How to make shapes with CSS which have borders?

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to make the div at the screen center not lower right corner?

    how to style php file with css + 1 more than one element

    How achieve rounded shadow behide a rounded element using css3

    LESS: How to specify current tag with nesting?

    How to keep styles after animation?

    When I try to print a page I created using jQuery Mobile, it always prints an extra blank page. How can I stop this?

    How to autoprefix css files generated by less, in Webstorm?

    How to overlay “transformed” element?

    How to center css menu and get rid of left margin space in ie?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    Meteor: How can I use Spacebars to apply different CSS elements?

    How to add vertical and horizontal separators between inline elements in CSS?

    links are showing up on each line, instead of inline

    How to rotate image used as list type in unordered list

    How to access to a CSS file in HTML?

    How to sequentially animate menu elements

    How to increase spacing between lines in CSS?

    How to create menu of overlayed divs?

    Element width based on how many siblings are present

    How to include stylesheet file only for one div?

    How can I add a css property to the first div with a specific class name?

    How to display an image from a dropdown menu selection?

    In javascript, jQuery, or css how do I get a div or iframe to expand to fill rest of space

    How can I create this centered header with multiple colors?

    How to spin css cube each after each [closed]

    How to use javascript to trigger a css event for a collection of elements that have the same class/name