checkbox property check value not updating in knockout js

I am working on Knockout Js. I have a page where I have three checkbox and its under foreach loop. Here is code

 <div class="form-horizontal" id="ko-bind-element">
            <input type="hidden" id="serverJSON" value="@Newtonsoft.Json.JsonConvert.SerializeObject(Model)" />
            <div data-bind="foreach: procedures">
                <div data-bind="template: { name: Mode(), data: $data }"></div>
            </div>
        </div>

<script type="text/html" id="procedure">
            <table class="table table-bordered" >
                <tr>

                    <td class="col-md-3"><span data-bind="text: Name"></span></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: AlreadyCompleted" /></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: NotApplicable" /></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: CreateNew" /></td>

                </tr>
                <tr>
                    <td colspan="4" style="padding:0;">

                        <div data-bind="if: CreateNew">
                            <textarea style="margin-top:10px; margin-bottom:10px;" class="col-md-offset-3 col-md-8" data-bind=" value : Text"></textarea>
                            <div class="clearfix"></div>
                        </div>
                    </td>
                </tr>
            </table>

        </script>

As there are three checkbox per row and I wanted only one of them should be selected so I have this jquery function which selects one checkbox at time per row

$("input:checkbox").on('click', function () {

        debugger;

        // in the handler, 'this' refers to the box clicked on
        var $box = $(this);
        if ($box.is(":checked")) {
            // the name of the box is retrieved using the .attr() method
            // as it is assumed and expected to be immutable
            var group = "input:checkbox[name='" + $box.attr("name") + "']";
            // the checked state of the group/box on the other hand will change
            // and the current value is retrieved using .prop() method
            $(group).prop("checked", false);
            $box.prop("checked", true);
        } else {
            $box.prop("checked", false);
        }
    });

But problem is now, When I check 1st checkbox then uncheck it. Then Check second checkbox and submit data. Both 1st and 2nd show checked . So don't know whether its Knockout issue.

Here is binding code

viewModel = {
        MtocFormID: 0,
        procedures: ko.observableArray(),
        dateid:null
    };


    $(document).ready(function () {
        var data = JSON.parse($("#serverJSON").val());
        viewModel.MtocFormID = ko.observable(data.ID);
      // viewModel.dateid = ko.observable(data.ExpiryDate)

        $(data.TemplateProcedure).each(function (index, element) {
            var mappedItem = {
            //    otherSafetyPro: ko.observableArray([]),
                VId: ko.observable(element.VId),
                TemplateID: ko.observable(element.TemplateID),
                ProcedureTemplateID: ko.observable(element.ProcedureTemplateID),
                Name: ko.observable(element.Name),

                AlreadyCompleted: ko.observable(element.AlreadyCompleted),
                NotApplicable: ko.observable(element.NotApplicable),
                CreateNew: ko.observable(element.CreateNew),
                Text: ko.observable(element.Text),
                Mode: ko.observable("procedure")
            }
            viewModel.procedures.push(mappedItem);
        });

        ko.cleanNode(document.getElementById("ko-bind-element"));
        ko.applyBindings(viewModel, document.getElementById("ko-bind-element"));
        form08wizard.submitData(getSubmitData);
    });