CODEWITHSUNDEEP
javascriptjqueryhtml
TheMethod
TheMethod

Reputation: 3001

Attributes dynamically changed not setting values

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!

Upvotes: 0

Views: 123

Answers (3)

yoav barnea
yoav barnea

Reputation: 5994

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())

Upvotes: 1

defau1t
defau1t

Reputation: 10619

.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.

Upvotes: 2

Joseph Silber
Joseph Silber

Reputation: 219936

$("#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).

Upvotes: 4

Related Questions