禁用表格中的按钮

I had a table which will bind the record from the database every page load function using KnockoutJs.

<table class="tbl" data-bind="visible: Page().length > 0">

    <tbody data-bind="foreach: Page">

        <tr>


            <td>
                <span data-bind="text: TimeType" id="TimeType" ></span> 
            </td>
            <td style="text-align: right;">
                <button class="btn1" data-bind="click: delete" id="Check-In">&nbsp;&nbsp;&nbsp;Check-In</button>
                <button class="btn1" data-bind="click: clickCheckout"  id="Check-Out" >Check-Out</button>
            </td>
        </tr>

In above table i had one lable and two buttons, TimeType as lable and Check-In and Check-Out as button. I need to disable the button which was clicked and other need to be enable. If check-in is clicked then the lable will has value as CheckIn otherwise empty. In page load if lable has checkin value in that it also need to work as button click function i.e. I need to disable the button Check-In and enable the other one.

But that functionality is working in button click event,

$("#Check-In").live("click", function () {

        $(this).attr('disabled', 'disabled');
        $(this).css('background', "green");
        $(this).parent().parent().find('#Check-Out').css("background", "");
        $(this).parent().parent().find('#Check-Out').removeAttr('disabled');
        $(this).parent().parent().find('#TimeType').text('Checkin');
        $('#Check-Out').removeAttr('disabled');
    });

    $("#Check-Out").live("click", function () {
        $(this).attr('disabled', 'disabled');
        $(this).css('background', "green");
        $(this).parent().parent().find('#TimeType').text('');
        $(this).parent().parent().find('#Check-In').removeAttr('disabled');
        $(this).parent().parent().find('#Check-In').css("background", "");

    });

But in page load its not working

function fnLoad() {
        $.ajax({
            url: '@Url.Action("action", "controller", new { Id = new})',
            cache: false,
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {},
            success: function (data) {
                self.List(data);
                 $.each(data, function () {

                    var time = this.TimeType

                    if (time == '') {

                             $(this).parent().parent().find("#Check-Out").attr('disabled', 'disabled');
                             $(this).parent().parent().find("#Check-Out").css('background', "green");
                             $(this).parent().parent().find('#Check-In').removeAttr('disabled');
                             $(this).parent().parent().find('#Check-In').css("background", "");

                    }

                        if (time == 'Checkin') {

                                $(this).parent().parent().find("#Check-In").attr('disabled', 'disabled');
                                $(this).parent().parent().find("#Check-In").css('background', "green");
                                $(this).parent().parent().find('#Check-Out').css("background", "");
                                $(this).parent().parent().find('#Check-Out').removeAttr('disabled');


                          }


                    });

            }
        });

    }

First of all you are going off the track , you should use knokcout for event binding as you have knockout so why still using Jquery events .

After that you can make a boolean observable for each button and add that observable with disable binding . For disable binding you can have a look at this Disable/Enable Binding . Think this will help you

<table class="tbl" data-bind="visible: Page().length > 0">

<tbody data-bind="foreach: Page">

    <tr>


        <td>
            <span data-bind="text: TimeType" id="TimeType" ></span> 
        </td>
        <td style="text-align: right;">
            <button class="btn1" data-bind="click: $root.delete, enable: !TimeType, css: { bigclass: TimeType != '' }" value="text: UserId" id="Check-In">&nbsp;&nbsp;&nbsp;Check-In</button>
                <button class="btn1" data-bind="click: $root.clickCheckout, enable: TimeType, css: { bigclass: TimeType == ''} " value="text: UserId" id="Check-Out" >Check-Out</button>

        </td>
    </tr>

CSS

.bigclass
  {
      background-color:green;
  }

Here in above code if Time Type has any value then Check out will enable and removed the class. Time Type will take value from database as I required and if the Time Type is empty then Check in button will enable and removed the class