Enabling a Control Group in a Row of a Table

Question

I have the following table:

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Action</th>
            <th>Name</th>
            <th>Start Time</th>
            <th>Duration</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: shiftsList">
        <tr>
            <td style="width: 9%">
                <form>
                    <button style="width: 47%" class="btn btn-warning"><i class="glyphicon glyphicon-pencil"></i></button> <button style="width: 47%" class="btn btn-danger" data-bind="click: $root.deleteShift"><i class="glyphicon glyphicon-remove"></i></button>
                </form>
            </td>
            <!-- I want to enable these three. -->
            <td style="width: 31%"><input disabled="disabled" type="text" class="form-control" data-bind="value: Name"></td>
            <td style="width: 30%"><input disabled="disabled" type="time" class="form-control" data-bind="value: StartTime"></td>
            <td style="width: 30%"><input disabled="disabled" type="time" class="form-control" data-bind="value: Duration"></td>
            <!-- I want to enable these three. -->
        </tr>
    </tbody>
</table>

It looks like this:

I want it so that when I press the edit button of a row (pencil), the text-boxes of the row will get enabled.

How can I achieve this using Knockout?

Answer 1

You can use knockout enable binding. Define a flag in your viewmodel that will be switched to true when user clicks the pen button.

Quick example: FIDDLE

<input disabled="disabled" type="time" 
 class="form-control" data-bind="value: Duration, 
                                 enable: enabledFlag">