knockout style binding is not updating

I've got the following markup:

<div data-bind="foreach: ReportsByPriority">
    <h2><span data-bind="text: Priority.Name"></span> Priority <span class="more-info"></span><span class="info small" data-bind="text: Priority.Description"></span></h2>
    <ol data-bind="foreach: ReportReplies" >
        <li><span data-bind="text: Name"></span<br/><br/>
            <input type="checkbox" name="ViolationCorrected" id="ViolationCorrected" data-bind="checked: ViolationCorrected"/>
            <span data-bind="style: { color: (ViolationCorrected == true ? '#3c801b' : 'red')}">Violation Corrected</span><br/><br/>
        </li>    
    </ol>
</div>

I am using the mapping util to convert my server model into a knockout model. When the page loads, everything looks correct, but when I try to check or uncheck my ViolationCorrected checkbox, the color of the text doesn't change. In the console when I type this:

mappedModel.ReportsByPriority()[0].ReportReplies()[0].ViolationCorrected()

It is showing the correct and updated value of each checkbox, but the color of the text doesn't change. If in console it's showing an updated value, it's definitely a working observable and capturing the changed value, so why doesn't the style binding color check on the span change to reflect that?

Solution

You need to get the value of the observable since you are doing conditional logic -

<div data-bind="foreach: ReportsByPriority">
    <h2><span data-bind="text: Priority.Name"></span> Priority <span class="more-info"></span><span class="info small" data-bind="text: Priority.Description"></span></h2>
    <ol data-bind="foreach: ReportReplies" >
        <li><span data-bind="text: Name"></span><br/><br/>
            <input type="checkbox" name="ViolationCorrected" id="ViolationCorrected" data-bind="checked: ViolationCorrected"/>
            <span data-bind="style: { color: (ViolationCorrected() === true ? '#3c801b' : 'red')}">Violation Corrected</span><br/><br/>
        </li>    
    </ol>
</div>

The reason it works on load is because ViolationCorrected is a function and therefore is not equal to false, and anything not equal to false is equal to true.