.prop() – возвращает или изменяет значение свойств выбранных элементов страницы.

Функция имеет четыре варианта использования:

.prop( propertyName )

Возвращает значение атрибута propertyName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого.

• propertyName — имя атрибута.

.prop( propertyName, value )

Устанавливает свойству propertyName значение value, у всех выбранных элементов.

• propertyName — имя свойства;
• value — значение, присваиваемое свойству.

.prop( propertyName, function )

Присваивает свойству propertyName значение, возвращенное функцией function() для всех элементов набора jQuery

• propertyName — имя свойства;
• function (index, oldPropertyValue) — функция, которая вызывается индивидуально для каждого отдельного элемента в наборе, а возвращаемое ею значение становится значением атрибута
  • index — позиция элемента в наборе;
  • oldPropertyValue — текущее значение свойства propertyName у элемента.

Замечание! Используя метод .prop(propertyName), вы получите свойства только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().

.attr() или .prop()

В определенных ситуациях разница между .attr() и .prop() существенна. До jQuery 1.6 .attr() содержал множество багов и был непрост в поддержке. Начиная с jQuery 1.6 метод .prop() предназначен для работы со свойствами DOM-объектов, в то время как .attr() – для работы с атрибутами.

Например, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, и defaultSelected должны быть получены или изменятся функцией .prop()

Начиная с jQuery 1.6, метод .attr() возвращает undefined для тех атрибутов, значение которых не было задано. Для получения и выставления таких опций как checked, selected, или disabled используйте метод .prop()

Допустим у нас есть элемент <input type="checkbox" checked />, а в переменной elem хранится его DOM-объект. В этом случае разница при работе с атрибутами и свойствами существенна, т.к. идет речь об атрибутах не требующих указания значений (checked и disabled в input-элементах). Сравним результаты:

• elem.checked – возвращает true
• $( elem ).prop( "checked" ) – возвращает true
• elem.getAttribute( "checked" ) – возвращает пустую строку
• $( elem ).attr( "checked" ) – начиная с jQuery 1.6 возвращает пустую строку и true для более ранних версий

Кросс-браузерный способ определить, установлен ли флажок:

if ( elem.checked )

или

if ( $( elem ).prop( "checked" ) )

или

if ( $( elem ).is( ":checked" ) )

Установка или изменение значения элементам

Метод .prop() это один из способов выставления значение элементам. Его следует использовать при работе с такими настройками как: selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, или defaultSelected. Начиная с jQuery 1.6, значение данных настроек не может быть задано с помощью метода .attr().

$( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );
$( "input" ).val( "someValue" );

Динамически формируемые значения

Используя функцию, мы можем динамически задать значение той или иной настройке. К примеру, поменяем все значения чекбоксов на странице:

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
  return !val;
});