Experts Exchange connects you with the people and services you need so you can get back to work.

Cant select checkbox dynamically

Hi,
I have an ajax call that returns a number of values.
With it I am assigning a value to an input text field (this works fine)
and trying to show a checkbox as 'checked'
I've tried a number of methods to try and check the checkbox dynamically but it simply isn't.
Is there something I'm missing?
using Jquery 1.9+
bootstrap 3

html segment

<div class="form-group form-group-xs">
<div class="col-md-4">
	<div class="checkbox">
	<label><input type="checkbox" value="1" class="styled" id="horsepower_check" name="specs[checks][horsepower]">Horsepower</label>
	</div>
</div>
<div class="col-md-8">
	<div class="col-md-12">
	<input type="text" class="form-control input-xs" value="" id="horsepower" name="specs[values][horsepower]">
	</div>
</div>
</div>

Open in new window

Script segment

$('#horsepower').val(data['engine']['horsepower']['!value']);
$('#horsepower_check').prop("checked", true);

Open in new window

tjyoung

Asked: 2016-10-03

Advertise Here

1 Solution

LVL 22

Kim WalkerWeb Programmer/TechnicianCommented: 2016-10-03

I see nothing wrong with the line that checks the checkbox. However,

With it I am assigning a value to an input text field (this works fine)

I'm surprised this works with the not operator (!) in the JSON object identifier, !value. Javascript identifiers must start with a letter, $, or _ and they can contain letters, digits, _ and $. But they cannot contain any other punctuation, especially one that is reserved.

Try reversing the order of the two lines you've posted and see if the checkbox gets checked. If not, can you please post a link to the live page?

One thing to consider is if there is another element with the id horsepower_check. Ids must be unique and when there are duplicates, only one is targeted. I believe it's the first that gets targeted because the DOM would not accept the second. But it could be the latter.

Also, have you validated your HTML? (Appears to be down at the moment!)

LVL 35

Terry WoodsIT GuruCommented: 2016-10-03

Kim's correct... commenting out the first jQuery operation causes it to work.

Demo:
http://jsfiddle.net/znvyfa26/2/

LVL 1

tjyoungAuthor Commented: 2016-10-04

Thanks for your input. Strangely after much suffering, its simply the 'style' being applied to the checkbox that was the issue. I removed the class and it worked right away.
The info above is still very good and helped me structure things a bit better regardless.
Many thanks.
tj

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Cant select checkbox dynamically

Join & Write a Comment Already a member? Login.

Featured Post