Kendo Observable binding for checkbox is always showing ticked

I am using ASP.NET MVC application with Kendo framework. For some reason, i am always getting the checkbox "#IsInterestDeemed" in ticked state. Although, the viewmodel property "IsInterest" is false under the controller action method. Please suggest where am i making the mistake.

<div id="RunModelDiv" style="min-width:300px">
  <div>
     <input type="checkbox" id="IsInterestDeemed" value="IsInterestDeemed" data-bind="checked: IsInterestDeemed, disabled: IsReadOnly" />
      <label for="IsInterestDeemed">&nbsp;Interest</label>
  </div>
<div>


 <script>
     var myViewModel;
 $(document).ready(function(){
    myViewModel = kendo.observable({            
                IsReadOnly: @Html.Raw(Json.Encode(Model.IsReadOnly)),
                IsInterestDeemed : '@Html.Raw(Json.Encode(Model.IsInterest))'});

    kendo.bind($("#RunModelDiv"), myViewModel);
   });
</script>

ViewModel Property:-

public bool IsInterest { get; set; }
public bool IsReadOnly { get; set; }

Why are the values for IsReadOnly and IsInterestDeemed in the Javascript handled differently (one is a string, the other is raw text)? Perhaps this is what is causing a syntax error on the page when it loads, and so the page will not behave as expected.

More specifically, these two lines are inconsistent:

IsReadOnly: @Html.Raw(Json.Encode(Model.IsReadOnly))
IsInterestDeemed : '@Html.Raw(Json.Encode(Model.IsInterest))'

Check the HTML output and verify your solution.