Solved

How to check the checkbox based on array value I get

Posted on 2014-02-21
10
1,545 Views
Last Modified: 2014-02-24
I'm doing knockout js. I have an array list coming from the database by making an ajax call and saving all the values in knockout observable array.

I'm looping through the array. Based on a value I want to check or uncheck the checkbox. Below is how I'm doing but this does not seems to be working. I can see values for roleid exists in the array but the checkbox is not checked if the value of roleid is true. What am i doing wrong here.

For example I'm doing this-

<tbody data-bind="foreach:$root.test">
    <tr>		
        <div><input type="checkbox" value="1" data-bind="checked: roleid == 1"/></div> 
    </tr>
</tbody>

Open in new window

0
Comment
Question by:bujjigadu
  • 4
  • 3
  • 2
10 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39877974
A couple of things I notice

1. by adding the attribute checked - irrespective of what value you set it to it is going to be checked

2. I suspect that knockout is not going to evaluate roleid == 1 it will probably create something like this

<input type="checkbox" data-bind="checked: roleid==1">

Open in new window


A non checked box must not have the checked attribute - irrespective of value.

Here is a sample of how to link a checkbox to your model

<input type="checkbox" data-bind="checked: roleid" />

Open in new window

Knockout View
function AppViewModel() {
    this.roleid = ko.observable(1);
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Open in new window

0
 

Author Comment

by:bujjigadu
ID: 39878266
Since the roleid values are already in an array and looping through my array which is 'test' in my case and trying to accomplish if the roleid value == 1 then check checkbox otherwise just display checkbox.

I tried to put the above mention function but checbox is checked all the time.

For example from the array I want to accomplish as

for each $root.test
if roleid == 1 then
check the checkbox
else
checbox


So basically I have three checkboxes and I'm trying to check them based on the value I get for roleid. Any suggestions please
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39878834
Can you post more of your code - difficult to see what is going on based on what has been posted.

The reason for the failure based on code snippet posted was because of the roledid==1 not being evaluated - can we see your model and other code.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 9

Expert Comment

by:Sar1973
ID: 39879465
Try:
var myArray = document.getElementById("ArrayName");
for (i = 0; i < myArray.length; i++) {
	if (myArray[i]=="yourValue") {
		document.getElementById("myCheck").checked=true;
	} else {
		document.getElementById("myCheck").checked=false;
	}
}

Open in new window

0
 

Author Comment

by:bujjigadu
ID: 39880741
I'm attaching my two code files here to look at it.

1) UserPermissions - EECopy - This file has the checkbox at the bottom and where I'm looping through the array. One note is the array gets build based on the value I change in Entity dropdown box (Please look for the comment <!--Display Entity Dropdown-->)
2) UserPermissionsModel - EECopy.js - This file has the viewmodel and calling my stored procedure to build the array.

Please let me know if it is not clear.
UserPermissionsModel---EECopy.js
UserPermissions---EECopy.txt
0
 

Author Comment

by:bujjigadu
ID: 39882566
Julian, any update on this?

Thanks
0
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 300 total points
ID: 39882728
Working on it ...
1
 
LVL 9

Expert Comment

by:Sar1973
ID: 39882821
Shouldn't you then replace my example  "yourValue" with the dropdown value? Assign also an onchange event to the dropdown.
0
 

Author Comment

by:bujjigadu
ID: 39883438
I got it working like this

<div><input type="checkbox" value="4" name = "Admin" data-bind="checked: roleid() ==1"/></div>

the key is to make roleid ===1 to roleid() ===1 since the array is returning as an object.
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question