Булевы атрибуты

Булевы атрибуты в HTML — это специальные атрибуты, которые могут быть либо присутствующими на элементе, либо отсутствующими, при этом их значение не имеет смысла в классическом виде. Примеры таких атрибутов: checked, disabled, readonly, required, autofocus. Если атрибут присутствует, его логическое значение считается true; если отсутствует — false.

Umbrella JS предоставляет удобные методы для работы с булевыми атрибутами, что позволяет легко считывать и изменять их состояние без прямого взаимодействия с DOM через getAttribute и setAttribute.

Проверка состояния булевых атрибутов

Метод .attr() в Umbrella JS позволяет получать значение атрибута:

u('input#subscribe').attr('checked'); // вернет true, если атрибут присутствует

Особенность работы с булевыми атрибутами в Umbrella JS заключается в том, что метод возвращает логическое значение, а не строку. Это упрощает условия и проверки:

if (u('input#subscribe').attr('checked')) {
    console.log('Подписка активирована');
}

Отсутствие атрибута возвращает undefined, что трактуется как false в логическом контексте.

Установка и удаление булевых атрибутов

Umbrella JS позволяет изменять булевы атрибуты с помощью метода .attr(attrName, value):

// Установка атрибута
u('input#subscribe').attr('checked', true);

// Удаление атрибута
u('input#subscribe').attr('checked', false);

При передаче true атрибут добавляется к элементу, при false — удаляется. Такой подход исключает необходимость вручную использовать setAttribute и removeAttribute, что делает код более читаемым и лаконичным.

Множественные элементы и булевы атрибуты

Если выборка содержит несколько элементов, метод .attr() применяется ко всем одновременно:

u('input[type="checkbox"]').attr('checked', true); // все галочки будут установлены

При чтении значения с множественных элементов возвращается значение первого элемента в коллекции:

u('input[type="checkbox"]').attr('checked'); // проверяет состояние первого чекбокса

Это соответствует стандартной логике работы Umbrella JS и упрощает манипуляции в списках элементов.

Специфические атрибуты форм

Для элементов форм булевы атрибуты имеют особое значение:

  • disabled блокирует элемент формы.
  • readonly делает поле ввода недоступным для редактирования.
  • required требует обязательного заполнения поля.

Umbrella JS позволяет изменять их динамически, что полезно для управления интерфейсом без перезагрузки страницы:

// Блокировка всех полей формы
u('form#login input').attr('disabled', true);

// Разблокировка после проверки
u('form#login input').attr('disabled', false);

Проверка состояния с помощью методов-оберток

Помимо .attr(), Umbrella JS предоставляет метод .prop(), который также работает с булевыми атрибутами, но возвращает истинное состояние свойства элемента:

u('input#subscribe').prop('checked'); // true или false

Метод .prop() полезен при работе с элементами, состояние которых может изменяться пользователем (например, флажки или переключатели). Разница между .attr() и .prop() заключается в том, что .attr() отражает HTML-атрибут, а .prop() — текущее свойство DOM.

Динамическое переключение атрибутов

Часто возникает задача переключения состояния булевого атрибута. Umbrella JS позволяет сделать это лаконично:

u('input#subscribe').attr('checked', function(el) {
    return !el.checked;
});

Функция получает текущий элемент, что позволяет вычислить новое состояние на основе текущего свойства, без необходимости отдельно считывать и записывать значение.

Итоговые возможности Umbrella JS с булевыми атрибутами

  • Чтение состояния атрибутов с возвращением логического значения.
  • Простое добавление и удаление через .attr(attr, true|false).
  • Работа с множественными элементами одновременно.
  • Управление состоянием элементов форм (disabled, readonly, required).
  • Использование .prop() для получения актуального свойства элемента.
  • Динамическое переключение состояния атрибутов через функцию обратного вызова.

Эти возможности делают работу с булевыми атрибутами в Umbrella JS предельно удобной и позволяют писать компактный, понятный код при манипуляциях с элементами формы и интерфейсом.

Оглавление