我有这段代码，我使用knockout.js foreach 绑定(bind)与使用css 类中的图像设置样式的复选框。
如何分别为每个复选框动态分配 ID，并将标签与该动态复选框 ID 相关联。
谁能帮我解决这个问题吗？
input[type=checkbox].css-checkbox1 {
display: none;
width: 30px;
margin: 0;
padding: 0;
opacity: 0;
}
input[type=checkbox].css-checkbox1 + label {
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
cursor: pointer;
padding-left: 30px;
background-repeat: no-repeat;
background: url(../images/img_sprite.png) no-repeat -14px -78px;
}
input[type=checkbox].css-checkbox1:checked + label {
background: url(../images/img_sprite.png) no-repeat -47px -78px;
}<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
</head>
<body>
<input type="button" value="Activity" data-bind="click: showActivity" />
<div data-bind="if: showActivityMenu">
<div data-bind="foreach:activity">
<input type="checkbox" id="checkbox1" value=" " data-bind="checkedValue: name, checked:$parent.selectedActivity" class="css-checkbox1" />
<label for="checkbox1" data-bind="text:name"></label>
</div>
<div style="float:right;">
<button data-bind="click:collectActivity">OK</button>
</div>
</div>
<div data-bind="ifnot: showActivityMenu">
<span class="inner" data-bind="text:selectedActivity"> </span>
</div>
</body>
<script>
function AAsearchViewModel() {
var self = this;
self.showActivityMenu = ko.observable(false);
self.activity = ko.observableArray([{
name: 'Yoga',
val: 1
}, {
name: 'Pilates',
val: 2
}, {
name: 'Kickboxing',
val: 3
}]);
self.selectedActivity = ko.observableArray(['Pilates']);
self.showActivity = function() {
self.showActivityMenu(true);
};
self.collectActivity = function() {
self.showActivityMenu(false);
};
};
ko.applyBindings(new AAsearchViewModel());
</script>
</html>最佳答案
您的 html 变得无效，因为所有复选框都具有相同的 id，并且标签具有相同的 for 属性，因此当您单击任何标签时，只会选中第一个复选框。
解决方案是生成唯一的 ID(例如，在 foreach 中使用 $index()):
<input type="checkbox" data-bind="attr: { id: 'checkbox' + $index() }, checkedValue: name, checked:$parent.selectedActivity" class="css-checkbox1"/>
<label data-bind="text:name, attr: { for: 'checkbox' + $index() }"></label>
这是一个JsFiddle Demo
关于html - CSS，knockout.js : how to dynamically assign id to checkbox with foreach data-bind，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32645509/