jQuery метод .prop()

Определение и применение

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

Разница между атрибутами и свойствами может иметь важное значение в конкретных ситуациях. Начиная с версии jQuery 1.6 метод .attr() предназначен только для работы с атрибутами элементов, а метод .prop() обеспечивает возможность работы со значениями свойств. Если значение элемента может быть изменено пользователем, например радио-кнопки, флажки, прочие изменяемые поля ввода, то необходимо использовать метод .prop(), чтобы получить актуальное значение (свойства checked, selected, disabled и так далее). Пример сравнения работы метода .attr() и .prop() представлен ниже.

jQuery синтаксис:

Синтаксис 1.6:

Код

// получение значения
$( selector ).prop( propertyName )

// установка значения/значений
$( selector ).prop( propertyName, value )
$( selector ).prop( {properties} )
$( selector ).prop( propertyName, function )

propertyName - String

properties - PlainObject

value - Anything

function - Function( Integer index, Anything oldPropertyValue ) => Anything

Добавлен в версии jQuery

1.6

Значения параметров

Параметр	Описание
propertyName	Имя свойства, которое необходимо получить (строковое значение).
properties	Объект, содержащий пары `свойство: значение`, которые будут установлены.
value	Значение, заданное для свойства.
function(index, oldPropertyValue)	Функция, возвращающая значение, которое будет установлено для свойства. В качестве первого аргумента принимает индекс элемента в наборе, а в качестве второго старое значение свойства. Внутри функции ключевое слово `this` ссылается на текущий элемент в наборе.

Пример использования

Сравнение методов .attr() и prop() при получении значения

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<label><input type="checkbox" checked="checked" /> Почувствуй разницу</label>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('input')
        .change(function () {
            $('div').html(
                '<p>.attr( "checked" ) - <b>' +
                    $(this).attr('checked') +
                    '</b></p>' +
                    '<p>.prop( "checked" ) - <b>' +
                    $(this).prop('checked') +
                    '</b></p>'
            )
        })
        .change()
})

В этом примере при загрузке документа и при нажатии на чекбокс (элемент <input> с типом checkbox) мы с использованием jQuery методов .prop() и .attr() получаем значение свойства и атрибута элемента, после этого с помощью метода .html() вставляем результат в элемент <div>. Как вы можете заметить использование в данном случае метода .prop() будет предпочтительнее, так как метод .attr() не дает возможности отследить выделен элемент, или нет.

Рассмотрим следующий пример в котором с использованием метода .prop() мы установим значение свойств элемента с помощью функции и с помощью передачи объект, содержащий пары свойство: значение, которые будут установлены:

Установка значения методом prop()

index.html

HTML

<button class="checkbox">Checkbox</button><button class="radio">Radio</button><br /><br />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="radio" checked="checked" />
<input type="radio" />
<input type="radio" checked="checked" />
<input type="radio" />

main.js

JavaScript

$(document).ready(function () {
    $('.checkbox').click(function () {
        $("input[type='checkbox']").prop('checked', function (i, val) {
            return !val
        })
    })
    $('.radio').click(function () {
        $("input[type='radio']").prop({
            checked: false,
            disabled: true,
        })
    })
})

В этом примере с использованием jQuery метода .prop() мы при нажатии на кнопку (HTML элемент <button>) с классом .checkbox вызываем функцию, переданную в качестве параметра метода, которая в зависимоти от значения элемента возвращает значение, обратное тому, которое установлено сейчас (если true, то будет false, если false, то true).

При нажатии на кнопку с классом .radio мы передаем в качестве параметра метода .prop() объект, содержащий пары свойство: значение, которые будут установлены элементам (снимаем галочки и блокируем элементы).