.attr('checked', 'checked') / .attr('checked', 'true') not adding attribute in html

Question

This is my JavaScript, using jQuery:

$("#E_DIV_H input[value='E,F']").attr('checked', 'checked');
var data = $('#E_DIV_H').html();
$('#copy').html(data);

When it copies the data from one <div> (#E_DIV_H) to another DIV (#copy), it unchecks the check box, which should already be checked due to the following code!

$("#E_DIV_H input[value='E,F']").attr('checked', 'checked');

Using Firebug, I see that .attr('checked', 'checked') is checking the check box without adding the attribute.

Is there any solution that works cross-browser? I’m using jQuery 1.4.2.

@Vohuman But `.attr()` should update the DOM node attribute and `.prop()` was added in 1.6 — A. Wolff, Dec 28 '14 at 19:11
@ShahidGhafoor http://jsbin.com/givizu/1/edit?html,js,console it seems like this works just fine. Press 'Run' on the box, it says `""`, so the box does seem to have an attribute set now. Could you link a demo of where it doesn't work? — Joeytje50, Dec 28 '14 at 19:13
@Vohuman No but was just wondering: doesn't `attr()` in jq1.4.2 update attribute then? — A. Wolff, Dec 28 '14 at 19:15
@Vohuman I just checked, it doesn't in fact http://jsfiddle.net/a23eebzr/ — A. Wolff, Dec 28 '14 at 19:19
@A.Wolff Yes, older `attr` tries to modify the properties if it can. — Ram, Dec 28 '14 at 19:22
@A.Wolff I checked the updated HTML using FireBug! in firefox — Shahid Ghafoor, Dec 28 '14 at 19:23
@Vohuman Ya, just checked the `.attr()` DOC, it is cleary explains there. Good to remember! — A. Wolff, Dec 28 '14 at 19:23
@ShahidGhafoor you'd have to use javascript `setAttribute('checked', true)` method instead — A. Wolff, Dec 28 '14 at 19:28
@A.Wolff can u please gave me an example , because `$("#E_DIV_H input[value='E,F']").setAttribute('checked', true);` not working — Shahid Ghafoor, Dec 28 '14 at 19:32
@Joeytje50 it work on jsfiddle also http://jsfiddle.net/9wq20y45/ but not working on any browser ! :( see above link and if you make html on local , its not working :( — Shahid Ghafoor, Dec 28 '14 at 19:33
@ShahidGhafoor that link does work fine for me though. What browser are you using? — Joeytje50, Dec 28 '14 at 19:34
@ShahidGhafoor You have to call it on DOM element, not jQuery object. If you only target one element, then you can use: `$("#E_DIV_H input[value='E,F']")[0].setAttribute('checked', true);` For more than one element, you'll need to iterate through returned collection, e.g: http://stackoverflow.com/a/18455368/1414562 — A. Wolff, Dec 28 '14 at 19:35
@A.Wolff yes! its working now !! thanks! please put your answer ! I'll accept ;) — Shahid Ghafoor, Dec 28 '14 at 19:37
@Joeytje50 if you make html file on local machine! and if u run it , it will not work, any browser firefox, chrome and IE ! but `setAttribute` solved my problem! thanks u also for cooperate ! — Shahid Ghafoor, Dec 28 '14 at 19:48

Ry- · Answer 1 · 2014-12-28T19:19:24.720

2

If you want to copy an element, use .clone(). Working with HTML is messy.

$('#copy').replaceWith(
    $('#E_DIV_H').clone().attr('id', 'copy')
);

Anyways, the reason it isn’t working is probably because (as you know) .prop() was introduced in 1.6.0; before then, .attr() did its job and is probably setting the property instead of the attribute.

edited Dec 28 '14 at 19:19

answered Dec 28 '14 at 19:12

Ry-

218,210
55
464
476

score 1 · Accepted Answer · answered Dec 28 '14 at 19:42

To update boolean attribute as checked in jQuery version <1.6, you should use javascript setAttribute() method, e.g:

$("#E_DIV_H input[value='E,F']")[0].setAttribute('checked', true);

If you have more than one element to target, then you have to iterate through collection, e.g:

var els = document.querySelectorAll("#E_DIV_H input[value='E,F']");
for (var i=0; i < els.length; i++) {
    els[i].setAttribute("checked", true);
}

.attr('checked', 'checked') / .attr('checked', 'true') not adding attribute in html

2 Answers2

Linked