Question

I have created table like below:

<table data-bind="with: choosenDateGoal">                       
   <tbody data-bind="foreach: tblGoals">
      <!-- ko if: status -->
         <tr class="success">
          <td>
            <input type="checkbox" onclick="this.disabled = 'disabled';" data-bind="checked: status, disable: status, click: $root.UpdateStatus" />
           </td>
          <td>
           <span style="width: 80%" data-bind="text: goals" />
           </td>
           <td>
           <input type="text" style="width: 80%" data-bind="value: notes , event: { blur: $root.UpdateNote}" />
           </td>
           </tr>
          <!-- /ko -->

           </tbody>
    </table>

I have an checkbox in every row and when i click on it it should change the row color.
But not working. here is my script for changing color:

self.UpdateColor = function ChangeBackgroundColor() {
    debugger;
    if ($("input[type='checkbox']:checked")) {
        $(this).parent().addClass('success'); ;
    }
};

Answer 1

Use knockout’s css binding – see http://knockoutjs.com/documentation/css-binding.html
Try binding below and you don’t call the ChangeBackgroundColor function

  <tr data-bind="css: {success: status()}">

Zaik’s answer will work, but if you do it the knockout way, you don’t need to add any JavaScript eventing code. This is one of the real benefit’s of knockout.