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
.