title: Disable Button in the table
body: <p>I had a table which will bind the record from the database every page load function using KnockoutJs.</p>
  
  <pre><code>&lt;table class="tbl" data-bind="visible: Page().length &gt; 0"&gt;
  
      &lt;tbody data-bind="foreach: Page"&gt;
  
          &lt;tr&gt;
  
  
              &lt;td&gt;
                  &lt;span data-bind="text: TimeType" id="TimeType" &gt;&lt;/span&gt; 
              &lt;/td&gt;
              &lt;td style="text-align: right;"&gt;
                  &lt;button class="btn1" data-bind="click: delete" id="Check-In"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Check-In&lt;/button&gt;
                  &lt;button class="btn1" data-bind="click: clickCheckout"  id="Check-Out" &gt;Check-Out&lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>In above table i had one lable and two buttons, <code>TimeType</code> as lable and <code>Check-In</code> and <code>Check-Out</code> as button. I need to disable the button which was clicked and other need to be enable. If <code>check-in</code> is clicked then the lable will has value as <code>CheckIn</code> 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.</p>
  
  <p>But that functionality is working in button click event,</p>
  
  <pre><code>$("#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", "");
  
      });
  </code></pre>
  
  <p>But in page load its not working</p>
  
  <pre><code>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');
  
  
                            }
  
  
                      });
  
              }
          });
  
      }
  </code></pre>