Adding attribute in jQuery

Question

How can I add an attribute into specific HTML tags in jQuery?

For example, like this simple HTML:

<input id="someid" />

Then adding an attribute disabled="true" like this:

<input id="someid" disabled="true" />

possible duplicate of [How to add an HTML attribute with jQuery](http://stackoverflow.com/questions/3866063/how-to-add-an-html-attribute-with-jquery) — Chris Laplante, Nov 09 '12 at 15:16

score 621 · Accepted Answer · answered May 13 '11 at 17:32

621

You can add attributes using attr like so:

$('#someid').attr('name', 'value');

However, for DOM properties like checked, disabled and readonly, the proper way to do this (as of JQuery 1.6) is to use prop.

$('#someid').prop('disabled', true);

answered May 13 '11 at 17:32

Paul Rosania

9,823
2
20
18

35

For me `$('#someid').prop('disabled', true);` doesn't work, but `$('#someid').attr('disabled', true);` works fine. – Vukašin Manojlović Sep 21 '12 at 18:30
4

Agree with @VukašinManojlović.. for me the same. – sstauross Dec 16 '14 at 15:27
4

Before you decide whether you're going to use `attr` or `prop`, it's important to understand the difference between properties and attributes. Without understanding the difference, you're likely to run into unexpected behavior. See http://stackoverflow.com/a/6004028/3367343 – Travis Hohl Nov 24 '15 at 20:22
can prop be used as a replacement for attr now? or it is used in some special cases only? – StealthTrails Feb 09 '17 at 18:12

xkeshav · Answer 2 · 2013-10-03T18:47:07.357

55

best solution: from jQuery v1.6 you can use prop() to add a property

$('#someid').prop('disabled', true);

to remove it, use removeProp()

$('#someid').removeProp('disabled');

Reference

Also note that the .removeProp() method should not be used to set these properties to false. Once a native property is removed, it cannot be added again. See .removeProp() for more information.

edited Oct 03 '13 at 18:47

answered May 13 '11 at 17:35

xkeshav

53,360
44
177
245

score 38 · Answer 3 · answered May 13 '11 at 17:34

38

You can do this with jQuery's .attr function, which will set attributes. Removing them is done via the .removeAttr function.

//.attr()
$("element").attr("id", "newId");
$("element").attr("disabled", true);

//.removeAttr()
$("element").removeAttr("id");
$("element").removeAttr("disabled");

answered May 13 '11 at 17:34

mattsven

22,305
11
68
104

1

Bonus for including the remove function! – BoatCode Nov 06 '14 at 21:14
IT DOESNT WORK! – Joanne Fsadni Sep 03 '21 at 06:20

score 17 · Answer 4 · answered May 13 '11 at 17:31

17

$('#someid').attr('disabled', 'true');

answered May 13 '11 at 17:31

Jerad Rose

15,235
18
82
153

score 7 · Answer 5 · answered May 13 '11 at 17:32

7

$('#someid').attr('disabled', 'true');

answered May 13 '11 at 17:32

e382df99a7950919789725ceeec126

5,751
4
31
56

score 4 · Answer 6 · edited Nov 30 '16 at 03:40

4

Add attribute as:

$('#Selector_id').attr('disabled',true);

edited Nov 30 '16 at 03:40

Sachith Muhandiram

2,819
10
45
94

answered Nov 30 '16 at 02:29

amar ghodke

451
4
23

score 2 · Answer 7 · edited Apr 24 '22 at 21:12

2

Use this code:

<script> 
   $('#someid').attr('disabled', 'true'); 
</script>

edited Apr 24 '22 at 21:12

Aston

199
1
3
18

answered Oct 20 '18 at 11:47

Vildan Bina

309
3
11

it would be nicer if you could have some explanation – mooga Oct 20 '18 at 12:20
Just include jQuery link after write code ` ` Text inside $ symbol select all element with id = someid , disabled attribute of this id change to true – Vildan Bina Oct 20 '18 at 19:16

score 2 · Answer 8 · edited Aug 10 '12 at 08:17

2

$('.some_selector').attr('disabled', true);

edited Aug 10 '12 at 08:17

j0k

22,600
28
79
90

answered May 13 '11 at 17:32

morgar

2,339
17
16

score 0 · Answer 9 · answered Feb 03 '15 at 08:33

0

This could be more helpfull....

$("element").prop("id", "modifiedId");
//for boolean
$("element").prop("disabled", true);
//also you can remove attribute
$('#someid').removeProp('disabled');

answered Feb 03 '15 at 08:33

Rejwanul Reja

1,339
1
17
19

1

Attributes and properties aren't exactly the same. For example, "id" is an attribute, not a property. You use `.attr()` to set or read it. See the paragraph "Attributes vs. Properties" under [.prop()](https://api.jquery.com/prop/) and [.attr()](https://api.jquery.com/attr/) in the jQuery docs. Also see [Paul Rosania's answer](http://stackoverflow.com/a/5995650/3345375) above. – jkdev May 14 '15 at 07:16

score 0 · Answer 10 · edited Mar 28 '16 at 06:55

0

$('#yourid').prop('disabled', true);

edited Mar 28 '16 at 06:55

Nisse Engström

4,738
23
27
42

answered Mar 28 '16 at 06:29

Nakendra Pun

41
2

score 0 · Answer 11 · answered Aug 12 '22 at 17:55

If you are trying to use removeProp() for "checked", "disabled" or "selected", it might not work. To remove property use prop with 'false' parameter.

        $('.my-input').prop('disabled', true); //adding property
        $('.my-input').prop('disabled', false); //removing property

documentation: https://api.jquery.com/removeprop/

Adding attribute in jQuery

11 Answers11

Linked

Related