316

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" />
informatik01
  • 15,636
  • 10
  • 72
  • 102
Yuda Prawira
  • 11,005
  • 9
  • 45
  • 52
  • 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

10 Answers10

600

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);
Paul Rosania
  • 9,573
  • 2
  • 19
  • 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
  • 3
    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? – Chaudhry Waqas Feb 09 '17 at 18:12
52

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.

diEcho
  • 52,196
  • 40
  • 166
  • 239
36

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");
mattsven
  • 20,501
  • 10
  • 66
  • 102
16
$('#someid').attr('disabled', 'true');
Jerad Rose
  • 14,855
  • 17
  • 79
  • 150
7
$('#someid').attr('disabled', 'true');
e382df99a7950919789725ceeec126
  • 5,471
  • 4
  • 30
  • 55
4

Add attribute as:

$('#Selector_id').attr('disabled',true);
Sachith Muhandiram
  • 2,735
  • 7
  • 38
  • 76
amar ghodke
  • 381
  • 4
  • 23
2
$('.some_selector').attr('disabled', true);
j0k
  • 22,303
  • 28
  • 77
  • 86
morgar
  • 2,309
  • 17
  • 16
1

Use this code:

<script> 
   $('#someid').attr('disabled', 'true'); 
</script>
Aston
  • 199
  • 1
  • 3
  • 18
Vildan Bina
  • 181
  • 1
  • 10
  • 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
0

This could be more helpfull....

$("element").prop("id", "modifiedId");
//for boolean
$("element").prop("disabled", true);
//also you can remove attribute
$('#someid').removeProp('disabled');
Rejwanul Reja
  • 1,141
  • 1
  • 16
  • 17
  • 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
0
$('#yourid').prop('disabled', true);
Nisse Engström
  • 4,636
  • 22
  • 26
  • 40
Nakendra Pun
  • 41
  • 2