Checkbox List Not working in Knockout JS

Question

I am new to Knockout. I am trying to create a List of Checkboxes, I followed the Answer here:

Working with a list of checkboxes in knockoutjs

But I am getting an error when trying to Bind the CHECKED Property of the Checkboxes.

The HTML:

<ul data-bind="template: { name: 'choiceTmpl', foreach: EnquiryTypeList, templateOptions: { selections: SelectedEnquiryTypes } }"></ul>

<script id="choiceTmpl" type="text/html">
    <li>
        <input type="checkbox" data-bind="attr: { value: $data.Id }, checked: SelectedEnquiryTypes" />
        <span data-bind="text: $data.Text"></span>
    </li>
</script>

The JavaScript:

var viewModel = {
    EnquiryTypeList: [new EnquiryType(1, "Text 1"), new EnquiryType(2, "Text 2")],
    SelectedEnquiryTypes: ko.observableArray()

};

function EnquiryType(id, text){
    Id = id,
    Text = text
};

ko.applyBindings(viewModel);

It works when I put 1 or 0 in place of checked: SelectedEnquiryTypes

<ul data-bind="template: { name: 'choiceTmpl', foreach: EnquiryTypeList, templateOptions: { selections: SelectedEnquiryTypes } }"></ul>

<script id="choiceTmpl" type="text/html">
    <li>
        <input type="checkbox" data-bind="attr: { value: $data.Id }, checked: 1" />
        <span data-bind="text: $data.Text"></span>
    </li>
</script>

Skaiol · Accepted Answer · 2015-03-23 11:34:03Z

5

I think you should use ko.computed. Here's the example: http://jsfiddle.net/7ac8v0wa/5/

edited Mar 23, 2015 at 11:34

answered Mar 23, 2015 at 11:16

Skaiol

3003 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thalsan · Accepted Answer · 2015-03-23 10:28:46Z

Not sure what you are trying. To show the text when the checkbox is clicked you can use the following.

HTML:

<ul data-bind="foreach: EnquiryTypeList">

    <li>
        <input type="checkbox" data-bind="attr: { value: Id }, checked: Check" />
        <!-- ko if: Check -->
        <span data-bind="text: Text"></span>
        <!-- /ko -->
    </li>

</ul>

JavaScript:

var viewModel = {
    EnquiryTypeList: ko.observableArray([new EnquiryType(1, "Text 1"), new EnquiryType(2, "Text 2")]),
};

function EnquiryType(id, text){
    this.Id = ko.observable(id),
    this.Text = ko.observable(text),
    this.Check = ko.observable(false);
};

ko.applyBindings(viewModel);

To observe the elements within the EnquiryType, you have to make them observable as well. Since you want to keep track of the list, that is the one that should be the observableArray. To check if the checkbox is checked, just simply add a boolean observable within your EnquiryType.

Community · Accepted Answer · 2017-05-23 10:24:09Z

0

templateOptions has been deprecated for a while. Make sure the documentation you read is up to date.
Knockout bindings work with object properties, not private variables. Eg, instead of Id = id, do this.Id = id.
In your checked binding, you're setting selectedEnquiryTypes, which is an array. The binding only works with booleans/ values that can evaluate to booleans (eg 0,1).

For this purpose, add a selected property to every enquiryType, and filter the selected items in a computed, as in @Skaiol's fiddle.

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Mar 23, 2015 at 13:52

webketje

11.2k3 gold badges28 silver badges56 bronze badges

Comments

Dawood Awan · Accepted Answer · 2015-04-01 12:16:53Z

Just in case someone else comes across this problem I am posting the Solution that worked for me:

<div id="EnquiryType" class="collapse col-md-12">
    <ul data-bind="foreach: Items" class="list-inline">
       <li>
           <input type="checkbox" data-bind="attr: { value: Id }, checked: Checked" />
            <span data-bind="text: Text"></span>
       </li>
    </ul>
</div>

On Server Side I created a class Called: CheckBoxViewModel

    public class CheckBoxViewModel
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public bool Checked { get; set; }
    }

In My ViewModel Passed a List<CheckBoxViewModel> to the View,

public class ViewModel{

public List<CheckBoxViewModel> Items {get;set;}
}

In the Knockout used the Mapping Plugin to Map ViewModel:

var defaultModel = @Html.Raw(Json.Encode((CreateQuoteViewModel)Model));

var model = ko.mapping.toJS(defaultModel);

ko.applyBindings(model);

So basically I edited my Logic to use: @Thalsan's Answer.

Collectives™ on Stack Overflow

Checkbox List Not working in Knockout JS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related