如何从一组复选框中绑定外部容器css

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

本文关键字：绑定 外部 css 复选框 一组      更新时间：2023-09-26

好吧，我承认问题中的语法很糟糕，但下面是真相:

我在我的网站中使用以下内容:

    Twitter引导
  • 淘汰赛
  • 迪朗达尔

我试图添加一个css类的外部标签周围的复选框(在复选框的列表)，所以它可以突出显示选中的复选框。基本上代码是这样的:

<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>

所以，我要做的是将btn-primary类添加到被选中的复选框的外部标签中。而不是把完整的视图模型放在这里，我已经创建了一个提琴:http://jsfiddle.net/riceboyler/WEPRZ/1/

我认识到我可以使用$data对象来获取当前项目，但我不知道如何检查并查看当前项目($data.text)是否在checkedValues observableArray中。我敢肯定，这可能是基本的Javascript，我错过了，但有没有办法做到这一点，而不使用计算值?

您可以通过检查父节点的checkedValues数组直接在css绑定中执行此操作。

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

参见

您可以尝试以下谓词:

$parent.checkedValues().indexOf($data.text) >= 0

我创建了一个新版本的小提琴。

相关文章：