I can't seem to get the knockoutjs checked binding to function as intended. I'm not sure if I'm making a mistake or something else is causing the issue. Here is the HTML snippet I'm working with:
<ul data-bind="foreach: ListItems" >
<li style="padding-left: 0px; margin-left: 0px; color: white; font-size: 12px;">
<div class="title" style="margin-right: 3em; line-height: 20px;">
<input type="checkbox" data-bind="checked: IsActive" />
<label data-bind="text: Quantity, disable: IsActive"</label>
<label data-bind="text: Description, disable: IsActive" ></label>
</div>
</li>
</ul>
I want users to be able to mark items off a list by clicking the checkbox, which should strike through the text or change its color. However, the checkbox doesn't seem to have any effect. My view model is generated from JSON data in this format:
{"$id":"1","Description":"New List","Categories":
[{"$id":"2","Description":"Bread/Bakery","ListItems":
[{"$id":"3","IsActive":1,"Description":"Bread","Quantity":"1 Loaf"}]},
{"$id":"4","Description":"Beverages","ListItems":
[{"$id":"5","IsActive":1,"Description":"Coke","Quantity":"1 Case"},
The issue here is that checking the checkbox doesn't trigger any changes. It should disable the other labels, but it's not working properly. All other values are displayed correctly, and when I use data-bind="text: IsActive", I see the value changing with the checkbox but it doesn't affect the labels.
Edit: per suggestion below:
var mydata = ko.observableArray([
{
Categories: ko.observableArray([
{
Description: "Dairy", ListItems: ko.observableArray([
{ Description: "Eggs", Quantity: "1 Dz.", IsActive: ko.observable(false) },
{ Description: "Milk", Quantity: "1 Gallon", IsActive: ko.observable(false) }
])
},
{
Description: "Produce", ListItems: ko.observableArray([
{ Description: "Lettuce", Quantity: "1 Head", IsActive: ko.observable(false) },
{ Description: "Oranges", Quantity: "5 ea.", IsActive: ko.observable(false) },
{ Description: "Greenbeans", Quantity: "1 Thingy", IsActive: ko.observable(false) },
])
},
])
}
]);