В качестве и свойствах выбранных

Статья, в которой познакомимся с тем, как в jQuery управлять disabled

, checked, selected и другими атрибутами (свойствами).

Методы jQuery (prop и removeProp) для работы со свойствами элементов

Атрибуты disabled, checked, selected, hidden, readonly и другие из этой серии относятся к группе логических атрибутов (свойств). Работа над значениями этих атрибутов в jQuery осуществляется с помощью метода prop.

Кроме этого метод prop используется не только для работы с системными свойствами, но также позволяет добавлять пользовательские свойства к элементам и удалять их при необходимости (с помощью метода removeProp). Создание, изменение и удаление пользовательских свойств рассмотрим ниже в соответствующем разделе этой статьи.

Методы prop и removeProp работают подобно методам attr и removeAttr, но в отличии от последних предназначены только для свойств.

Рассмотрим различие между обычными и логическими атрибутами.

Если у элемента присутствует логический атрибут (например, disabled), то это означает то, что он установлен (true) и при этом не важно, какое он имеет значение.

В соответствии со спецификацией HTML5 в качестве значения логических атрибутов (если это необходимо) желательно использовать пустую строку или его имя:

Кроме этого, согласно спецификации HTML не рекомендуется применять в качестве значений логических атрибутов true или false.

Если у элемента отсутствует логический атрибут (например, disabled), то это говорит о том, что он не установлен. Другими словами он имеет значение false.

Метод prop и removeProp

Метод prop предназначен для установления свойства (несколько свойств) каждому элементу текущего набора одним из следующих способов:

  • Устновить значение указанному свойству для элементов текущего набора:
    .prop('имя_свойства', значение);
    
  • Установить несколько свойств элементам:
    .prop({
    'имя_свойства1':значение,
    'имя_свойства2':значение
    });
    
  • Установка значения свойству с помощью функции:
    .prop('имя_свойства', function(index,prop){
    // аргументы функции и ключевое слово this
    // index - число, содержащее порядковый номер (индекс) элемента в наборе
    // prop - строка, содержащая текущее значение свойства
    // this - текущий элемент
    // содержимое функции
    // ...
    });

Метод removeProp предназначен для удаления указанного свойства у каждого элемента текущего набора. Данный метод необходимо использовать только для удаления пользовательских свойств, которые были установлены элементам DOM и объекту window. Метод removeProp нельзя использовать для встроенных (родных) свойств объектов, таких как disabled, checked, selected и др. Если вы хотите убрать атрибут (свойство) disabled, checked, selected или что-то подобное, то используйте метод prop и в качестве значения необходимого свойства используйте значение false.

jQuery — атрибут disabled

Добавление и удаление атрибута disabled в jQuery выполняется с помощью метода prop.

Например, сделать кнопку submit активной, только в том случае, если что-то будет введено в поле input:

jQuery — атрибут checked

Установление и снятие атрибута checked в jQuery осуществляется посредством метода prop.

Например, проверить состояния кнопки checkbox в форме «Регистрация». Если оно имеет значение false, то отобразить сообщение и сделать недоступной кнопку для отправки данных формы на сервер.

Рассмотрим пример, в котором выполним 2 операции над checkbox. Первое — это установим после загрузки страницы checked на нужный radio элемент (например, на 2). На 2 шаге создадим действие, которое будет выводить в консоль браузера, при изменении radio, значение выбранного (checked) переключателя:

jQuery — Установить selected

Установка выбранного (selected) элемента выполняется с помощью метода prop.

Например, после загрузки страницы добавим свойство selected к последниму элементу:

Удаление selected у элемента осуществляется также как и других свойств (логических атрибутов), т.е. посредством присвоения данному свойству значения false.

Работа с пользовательскими свойствами

Элемент DOM — это объект. Следовательно, он как и любой другой объект JavaScript может иметь пользовательские свойства.

jQuery позволяет добавлять пользовательские свойства к элементам DOM с помощью метода prop. Эти свойства можно будет прочитать только с помощью JavaScript (jQuery), т.к. другим способом их обнаружить не удастся. Кроме этого, они никак не сказываются при показе элементов на странице.

Например, добавим к кнопкам с class="counter" пользовательское свойство count, которое будем использовать для хранения количество нажатий (click-ов):

Рассмотрим ещё один пример, в котором создадим 2 кнопки и элемент p с id="myPargraph". С помощью первой кнопки будем добавлять нестандартное свойство myProp к элементу с id="myPargraph". Вторую кнопку будем использовать для удаления пользовательского свойства myProp у этого же элемента (id="myPargraph"). Кроме этого каждое действие будет заканчиваться тем, что выводить значение свойство myProp в содержимое элемента, имеющего id="myParagraph".

Управление логическими атрибутами с помощью attr

Кроме этого управлять логическими атрибутами (свойствами) HTML элементов disabled, checked, selected, hidden и другими можно также с помощью методов attr и removeAttr. Выполнять это следует в соответствии со спецификацией. Т.е. если у элемента есть логический элемент, то его значение равно true. А если нет, то false.

Например, выполним управление атрибутом disabled с помощью метода attr.

Управление логическими атрибутами с помощью метода jQuery attr

Статья, которая может быть вам также интересной:

Работа с атрибутами HTML-элементов в jQuery с помощью методов attr и removeAttr.

Источник

Поделиться:
Нет комментариев

Добавить комментарий

Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.

×
Вам будет интересно