knockout: enable input boxes

foreach user/contact enable/disable the row's input boxes by clicking a button.

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<table>
    <thead>
        <tr>
            <td>id</td>
            <td>firstname</td>
            <td>surname</td>
            <td>&nbsp;</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: contacts">
        <tr>
            <td>
                <input type="text" data-bind="value: id, enable: isEnabled" />
            </td>
            <td>
                <input type="text" data-bind="value: firstname, enable: isEnabled" />
            </td>
            <td>
                <input type="text" data-bind="value: surname, enable: isEnabled" />
            </td>
            <td>
                <label>
                    <input type='checkbox' data-bind="checked: isEnabled" />edit</label>
                <button data-bind="visible: isEnabled">remove</button>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

var contactModel = function (data) {
    this.isEnabled = ko.observable(false);
    ko.mapping.fromJS(data, null, this);
};

var contactsMapping = function (data) {
    var mappingOptions = {
        'contacts': {
            key: function (item) {
                return ko.utils.unwrapObservable(item.id);
            },
            create: function (options) {
                return new contactModel(options.data);
            }
        },
    };
    ko.mapping.fromJS(data, mappingOptions, this);
};

var model = {
    "contacts": [{
        "id": "1",
        "firstname": "Ian",
        "surname": "Brown"
    }, {
        "id": "2",
        "firstname": "John",
        "surname": "Squire"
    }, {
        "id": "3",
        "firstname": "Simon",
        "surname": "Wolstencroft"
    }]
};
var viewModel = new contactsMapping(model);
ko.applyBindings(viewModel);