CODEWITHSUNDEEP
javascriptcheckboxknockout.js
user908094
user908094

Reputation: 390

knockout.js checkboxes used to control enabled/disabled state of input fields

I am trying to bind a checkbox to each line in a list of objects, in a very similar fashion to a question asked/answered here: Binding a list of objects to a list of checkboxes

Essentially, as follows:

<ul data-bind="foreach: phones">
  <li>
    <input type='text' data-bind="attr: {value:phone}, disable: $root.selectedPhones"/>
    <input type="checkbox" data-bind="attr: {value:id}, checked: $root.selectedPhones" />
  </li>
</ul>

<hr/> selected phones:
<div data-bind="text: ko.toJSON($root.selectedPhones)"></div>
<hr/> phones:
<div data-bind="text: ko.toJSON($root.phones)"></div>

with js as follows:

function Phone(id,phone) {
  this.id = id;
  this.phone = phone;
}

var phones_list = [
  new Phone(1, '11111'),
  new Phone(2, '22222'),
  new Phone(3, '33333')
];

var viewModel = {
  phones: ko.observableArray(phones_list),
  selectedPhones: ko.observableArray()
};

ko.applyBindings(viewModel);

The idea being that in the initial state, all of the input boxes are disabled and that clicking a checkbox will enable the input box in that row.

The data is coming from a fairly deeply nested object from the server-side so I'd like to avoid 'padding' the data with an additional boolean ie avoiding new Phone(1,'xx', false) (a) because it's probably unnecessary (b) because the structure is almost certainly going to change...

Can the selectedPhones observable be used by the enable/disable functionality to control the status of fields in that 'row'?

Hope someone can help....

I have a jsfiddle here

Upvotes: 1

Views: 1344

Answers (1)

nemesv
nemesv

Reputation: 139748

You can create a small helper function which checks that a given id appers in the selectedPhones:

var viewModel = {
    phones: ko.observableArray(phones_list),
    selectedPhones: ko.observableArray(),
    enableEdit: function(id) {
        return ko.utils.arrayFirst(viewModel.selectedPhones(), 
           function(p) { return p == id })
    }
};

Then you can use this helper function in your enable binding:

<input type='text' data-bind="attr: {value:phone}, disable: $root.enableEdit(id)"/>

Demo JSFiddle.

Upvotes: 1

Related Questions