CODEWITHSUNDEEP
checkboxknockout.js
DavidReid
DavidReid

Reputation: 449

Knockout.js Checkbox checked and click event

We're trying to implement a checkbox and list with the following functionality:

The problem I am having is that if you click to remove each array item, then click the checkbox to add a blank entry, I'm expecting the checkbox to be checked again (as per the checked observable), however it is not?

I have the following code:

http://jsfiddle.net/UBsW5/3/

    <div>
        <input type="checkbox" data-bind="checked: PreviousSurnames().length > 0, click: $root.PreviousSurnames_Click" />Previous Surname(s)?
    </div>
    <div data-bind="foreach: PreviousSurnames">
        <div>
            <input type="text" data-bind="value: $data">
            <span data-bind="click: $root.removePreviousSurname">Remove</span>
        </div> 
    </div>


var myViewModelExample = function () {
    var self = this;

    self.PreviousSurnames = ko.observableArray(['SURNAME1', 'SURNAME2', 'SURNAME3']);

    self.removePreviousSurname = function (surname) {
        self.PreviousSurnames.remove(surname);
    };

    self.PreviousSurnames_Click = function () {
        if (self.PreviousSurnames().length === 0) {
            self.PreviousSurnames.push('');
        }
        else {
            self.PreviousSurnames.removeAll();
        }
        alet(2)
    }

}

ko.applyBindings(new myViewModelExample());

Upvotes: 5

Views: 18027

Answers (2)

David East
David East

Reputation: 32624

You need to use a computed to monitor the length of the observable array. This way when the length reaches zero you can react to it automatically. 

    self.surnames = ko.computed(function() {
        var checked = true;
        if (self.PreviousSurnames().length === 0) {
            self.PreviousSurnames.push('');
            checked = false;
        }            
        return checked;
    });

Now you will have the blank text box when all of the names are cleared. If you update your binding on the checkbox it will function properly as well.

<input type="checkbox" data-bind="checked: surnames, click: PreviousSurnames_Click" />Previous Surname(s)?

FIDDLE

Upvotes: 5

nemesv
nemesv

Reputation: 139798

If you are using together the click and the checked then you need to return true from your click handler to allow the browser default click action which is in this case checking the checkbox:

self.PreviousSurnames_Click = function () {
    if (self.PreviousSurnames().length === 0) {
        self.PreviousSurnames.push('');
    }
    else {
        self.PreviousSurnames.removeAll();
    }
    return true;
}

Demo JSFiddle.

Upvotes: 16

Related Questions