Question

尝试了不同的方法来禁用绑定上的某些文本框：

这是一个小提琴：

http://jsfiddle.net/tonymaloney1971/jpswf04L/

我想要做的是当用户按下+按钮时禁用前一行的所有文本框，这样它们就不可编辑了。

我试过在添加后拦截敲除绑定事件，但不知道是什么待办事项。

这是我的getProcessed（）代码：

            getProcessed: function (data, element) {
                console.log("getProcessed() - element " + element);
                //not sure what to do here?????????????
                if (element.nodeType === 1)
                    $(element).hide().slideDown();
            }

这是我的绑定HTML：

      <ul data-bind="foreach: { data:journey, afterAdd: getProcessed($data, $element)}" style="list-style-type:none">
            <li class="tagItem">
                <div class="form-group">
                    <div class="col-sm-2">
                        <input type="text" data-bind="value: PostCodeStart" class="form-control" placeholder="Postcode" />
                    </div>

                    <div class="col-sm-2">
                        <input type="text" data-bind="value: PostCodeEnd" class="form-control" placeholder="Postcode" />
                    </div>

                    <div class="col-sm-2">
                        <input type="number" data-bind="value: Mileage" class="form-control" placeholder="Mileage" />
                    </div>

                    <div class="col-sm-2">
                        <input type="text" data-bind="value: Notes" class="form-control" placeholder="Enter Notes" />
                    </div>

                    <div class="col-sm-2">
                        <button class="btn-danger img-rounded" data-bind="click: $root.remove">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </div>
                </div>
            </li>
        </ul>

由于

Answer 1

您的每个输入都需要一个绑定来测试当前行是否是最后一行：

<div class="col-sm-2">
    <input type="text" data-bind="value:PostCodeStart, disable:$root.isNotLast($index)" class="form-control" placeholder="Postcode" />
</div>

在ViewModel中：

    this.isNotLast = function (index) {
        var idx = index();
        var lastIdx = self.journeyList().length - 1;
        return lastIdx > idx;
    };

演示：http://jsfiddle.net/jpswf04L/6/

您还可以为该行创建自定义绑定：

ko.bindingHandlers.disableRow = {
    update: function (element, valueAccessor) {
        var inputs = $(element).find('input');
        if (valueAccessor()) {
            inputs.attr('disabled', true);
        }
        else {
            inputs.removeAttr('disabled');
        }
    }
};

所以你只有一个绑定：

<div class="form-group" data-bind="disableRow:$root.isNotLast($index)">

演示：http://jsfiddle.net/jpswf04L/9/

Knockout启用绑定

1 个答案: