CODEWITHSUNDEEP
knockout.js
user142617
user142617

Reputation: 386

Knockout enable binding

Tried different methods to disable some textbox's on a binding:

Here is a fiddle:

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

What I am trying to do is when the user presses the + button is to disable all the textbox's on the previous row so they are not editable.

I have tried intercepting the knockout binding event afterAdd but don't know what todo.

Here is my getProcessed() code:

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

Here is my binding 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>

Thanks

Upvotes: 0

Views: 930

Answers (1)

Roy J
Roy J

Reputation: 43881

Each of your inputs would need a binding that tests whether the current row is the last:

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

And in the ViewModel:

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

Demo: http://jsfiddle.net/jpswf04L/6/

You could also make a custom binding for the row:

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

So you just have one binding:

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

Demo: http://jsfiddle.net/jpswf04L/9/

Upvotes: 1

Related Questions