Solved

Cant select checkbox dynamically

Posted on 2016-10-03
3
77 Views
Last Modified: 2016-10-04
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

0
Comment
Question by:tjyoung
3 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41827151
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!)
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41827168
Kim's correct... commenting out the first jQuery operation causes it to work.

Demo:
http://jsfiddle.net/znvyfa26/2/
0
 
LVL 1

Author Comment

by:tjyoung
ID: 41828336
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
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Hide and Unhide Table 6 24
Table style position to the left 8 24
DataTable column sorting incorrectly 2 17
Why is my $_POST not going to results page 10 33
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

713 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