How to initialize FuelUX checkbox with knockout binding

Question

I am using KnockoutJS for my client-side viewmodel needs, and I'm using FuelUX for some styling of my components.

I have several checkboxes on a form whose value is bound to a knockout observable, but when the checkbox binding is checked on page load, FuelUX does not display the checkbox as being checked unless I mouse over the checkbox. Once I mouse over the checkbox it displays the correct state.

The knockout binding occurs in a ready function, so the page is already loaded when the checked state is applied, so I think that might be the issue. For some reason FuelUX is not picking up this change.

Is there a way to force FuelUX to refresh the state of checkboxes?

vincentw56 vincentw56 · Accepted Answer · 2016-02-18T06:48:14

I know this is old, but I was searching for something else and came across it so I thought I would provide a solution. The check mark is part of the label element in Fuel UX. So you can do it like this:

<label class="checkbox-custom" data-initialize="checkbox" data-bind="css: { checked: paid }">
    <input id="Paid" type="checkbox" data-bind="checked: paid">
    <span class="checkbox-label">Paid</span>
</label>

Notice the data-bind on the label? This applies the CSS class 'checked' when the check box is checked. This is the same class that is applied by Fuel UX.

How to initialize FuelUX checkbox with knockout binding

1 Answers