Работа с булевыми атрибутами

Булевы атрибуты в HTML — это специальные атрибуты, которые могут быть либо присутствующими, либо отсутствующими на элементе. Присутствие атрибута автоматически означает значение true, отсутствие — false. К классическим примерам относятся checked, disabled, readonly, selected и multiple.

В Dom7 работа с такими атрибутами осуществляется через методы .attr(), .removeAttr() и специализированные подходы для булевых значений.

Получение и проверка булевых атрибутов

Для получения текущего состояния булевого атрибута используется метод .attr(). Он возвращает строку "true"/"false" только если атрибут явно задан, но чаще достаточно проверить наличие атрибута через его наличие:

var checkbox = $('.my-checkbox');
if (checkbox.attr('checked') !== undefined) {
  console.log('Элемент отмечен');
}

В Dom7 также часто используется логика:

var isChecked = !!checkbox[0].checked;

Использование свойства DOM напрямую (.checked, .disabled) обеспечивает точную проверку состояния элемента, так как .attr() может вернуть строковое значение или undefined.

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

Для установки булевых атрибутов через Dom7 используется метод .attr(name, value):

var input = $('.my-input');
input.attr('disabled', true); // Добавляет атрибут disabled
input.attr('readonly', false); // Не удаляет атрибут! Только устанавливает значение false

Важно понимать, что прямое присвоение false через .attr() не удаляет атрибут из DOM. Для корректного управления булевыми атрибутами используется комбинация .attr() и .removeAttr():

input.attr('disabled', true);   // включение
input.removeAttr('disabled');    // отключение

Переключение состояния (toggle)

Часто требуется динамически менять состояние булевого атрибута. В Dom7 удобно создавать универсальные функции:

function toggleAttr(el, attrName) {
  var element = $(el);
  if (element.attr(attrName) !== undefined) {
    element.removeAttr(attrName);
  } else {
    element.attr(attrName, true);
  }
}

toggleAttr('.my-button', 'disabled'); // Включает или отключает атрибут

Такой подход особенно полезен для элементов форм, когда требуется реагировать на действия пользователя.

Булевы атрибуты в циклах и коллекциях

Dom7 поддерживает работу с коллекциями элементов. Для массового управления атрибутами можно использовать each или методы напрямую:

$('.checkbox-group').each(function(el) {
  $(el).attr('checked', true);
});

Для снятия всех атрибутов:

$('.checkbox-group').each(function(el) {
  $(el).removeAttr('checked');
});

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

Различие между .prop() и .attr()

Хотя Dom7 не имеет встроенного метода .prop() как jQuery, важно понимать разницу:

  • .attr('checked') — обращается к атрибуту DOM, который может быть задан в HTML.
  • .checked (свойство) — отражает текущее состояние элемента, которое может отличаться от исходного атрибута.

Пример:

var checkbox = $('.my-checkbox')[0];
console.log(checkbox.checked); // true или false, текущее состояние
console.log(checkbox.getAttribute('checked')); // "checked" или null, исходное значение атрибута

Для динамических интерфейсов управление через свойство .checked предпочтительно, а .attr() используется для первоначальной настройки или сериализации формы.

Практические рекомендации

  • Для включения булевого атрибута использовать .attr(name, true).
  • Для отключения — .removeAttr(name).
  • Для чтения текущего состояния элементов форм лучше обращаться к свойствам DOM (.checked, .disabled).
  • Для массовых операций использовать методы коллекций Dom7 (each, .attr(), .removeAttr()).

Булевы атрибуты являются фундаментальной частью управления формами и интерактивными элементами в браузере. Dom7 предоставляет минималистичный, но эффективный инструментарий для их работы, сочетая методы манипуляции атрибутами с прямым доступом к свойствам DOM.

Оглавление