Свойства

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

prop(propertyName)	получение значения свойства
prop(propertyName, value)	установка значения свойства
prop({ propertyName1: value, propertyName2: value })	установка нескольких значений
prop(propName, function(index, value) { return value } )	используя функцию обратного вызова index это порядковый номер элемента в выборке value — текущее значение атрибута
removeProp(propName)	удаление свойства (скорей всего, никогда не понадобится)

А теперь выключите музыку, и запомните следующее – для отключения элементов формы и для проверки/изменения состояния чекбоксов мы всегда используем метод prop(), пусть вас не смущает наличие одноименных атрибутов в HTML (это я про «disabled» и «checked»), используем prop() и точка.

Давайте на примере:

Пример работы с атрибутами и свойствами элементов

Посмотрите, как работает система без нашего вмешательства — кликните чекбокс, селектбокс, попробуйте отправить форму.

Теперь приступим к серии экспериментов (не забудьте обновить страничку):

1. Ставим галочку на чекбоксе посредством метода attr():

   $("#checkbox").attr("checked", "checked")

2. Теперь снимите галочку мышкой — значение attr() осталось без изменений, значение prop() изменилось

3. Попробуйте ещё раз поставить галочку, используя метод attr()

Небольшое пояснение сути происходящего. При первом вызове метода attr("checked", "checked") проставляется галочка, т.к. изменяются и атрибут и свойство checked. При повторном вызове уже ничего не происходит, меняется только значение атрибута, которое и так ужеchecked.

Следующий эксперимент:

1. Поставьте мышкой галочку на чекбоксе

2. Снимите галочку — значение attr() не изменяется

3. Попробуйте установить значение посредством вызова:

   $("#checkbox").attr("checked", "checked")

В данном эксперименте интересен следующий момент: вызов метода attr("checked", "checked") не срабатывает после того, как пользователь изменял статус чекбокса

Ну и ещё один эксперимент со вторым чекбоксом:

1. Удаляем галочку:

   $("#checkbox").removeAttr("checked")

2. Ставим галочку:

   $("#checkbox").attr("checked", "checked")

3. Опять удаляем галочку, используя метод attr()

4. Повторяем до упаду

Работает — не трожь, мышкой всё сломаете :)

Сравните с поведением метода prop():

1. Удаляем галочку:

   $("#checkbox").prop("checked", false)

2. Ставим галочку:

   $("#checkbox").prop("checked", true)

3. Можем кликать мышкой по чекбоксу и повторять предыдущие пункты в произвольном порядке, всё будет работать как часы

Надеюсь, я достаточно наглядно дал понять, когда надо использовать attr(), а когда prop()

Это ещё не всё, у нас же есть ещё свойство disabled! Но не волнуйтесь, его поведение более предсказуемо, т.к. пользователь не может вмешиваться в его состояние:

1. Включаем радио-кнопку:

   $("#radio").attr("disabled", false)

2. Выключаем:

   $("#radio").attr("disabled", true)

3. Повторяем

Аналогичное поведение при использовании метода prop():

1. Включаем:

   $("#radio").prop("disabled", false)

2. Выключаем:

   $("#radio").prop("disabled", true)

3. Повторяем

Ну, как бы, можно использовать attr(), но нет!