Question

我有一个表，它将使用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>

在上表中，我有一个标签和两个按钮，TimeType为标签，Check-In和Check-Out为按钮。我需要禁用单击的按钮，其他需要启用。如果点击check-in，那么标签的值为CheckIn，否则为空。在页面加载中，如果标签具有签入值，则它还需要作为按钮单击功能工作，即我需要禁用按钮签到并启用另一个。

但该功能在按钮点击事件中起作用，

$("#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", "");

    });

但是在页面加载中它不起作用

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');


                          }


                    });

            }
        });

    }

Answer 1

首先你要离开赛道，你应该使用knokcout进行事件绑定，因为你有淘汰赛，所以为什么还要使用Jquery事件。

之后，您可以为每个按钮创建一个布尔值observable，并使用禁用绑定添加该observable。对于禁用绑定，您可以查看此Disable/Enable Binding。认为这会对你有所帮助

Answer 2

<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;
  }

如果上面的代码中Time Type有任何值，那么Check out将启用和删除该类。 Time Type将根据我的要求从数据库中获取值，如果Time Type为空，则Check in按钮将启用并删除该类

禁用表中的按钮

2 个答案: