Attributes dynamically changed not setting values

Question

So all I want to do is set the disabled and readonly attributes of a text input to "disabled" and "readonly" respectively.I am using Jquery version 1.7.1 . I've tried the following methods:

$("#testtext").attr('disabled','disabled');
$("#testtext").attr("readonly","readonly");
$("#testtext").attr('disabled',true);
$("#testtext").attr("readonly",true);
$("#testtext").prop('disabled',true);
$("#testtext").prop("readonly",true);

The resulting markup looks like this:

<input type = "text" id = "testtext" disabled />

As you can see it is adding the disabled attribute but not giving it a value. This works on some devices but not all of the ones I am trying to support. This seems like something that jQuery should do but my Googling is not coming up with much in this respect. Does anyone have any advice or suggestions? Any advice would be appreciated, thanks much!

Which devices? Are you using jQuery Mobile? The disabled attribute is a boolean property: if present, regardless of the value, the input is disabled. — Matt Ball
– Matt Ball, Commented Feb 6, 2013 at 18:45
"The resulting markup" ... manipulating the DOM with JavaScript/jQuery has nothing to do with markup. — Pointy
– Pointy, Commented Feb 6, 2013 at 18:45

Joseph Silber · Accepted Answer · 2013-02-06 18:43:51Z

4

$("#testtext").prop("disabled", true);
$("#testtext").prop("readonly", true);

works everywhere, because those are Boolean flags: their presence indicates that the flag is on (the element is disabled/readonly) no matter whether the attribute has a value (or even what the value in the markup is ⇨ disabled=false is also disabled).

answered Feb 6, 2013 at 18:43

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

defau1t · Accepted Answer · 2013-02-06 18:47:14Z

.prop( propertyName ) // propertyNameThe name of the property to get.

.attr( attributeName ) // attributeNameThe name of the attribute to get.

As per spec:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

yoav barnea · Accepted Answer · 2013-02-06 20:20:55Z

1

go with the .prop() . it is more suitable/reliable for boolean properties than the .attr()

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method

(from the jquery documentation of .prop())

edited Feb 6, 2013 at 20:20

answered Feb 6, 2013 at 19:20

yoav barnea

6,0242 gold badges24 silver badges28 bronze badges

Collectives™ on Stack Overflow

Attributes dynamically changed not setting values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related