To remove disabled attribute using jQuery, use the removeAttr() method. You need to first remove the property using the prop() method. It will set the underlying Boolean value to false.
You can try to run the following code to learn how to remove disabled attribute using jQuery:
Существует элемент ввода, который отключен, задача состоит в том, чтобы включить его с помощью JQuery. Вот несколько примеров, которые обсуждались.
Чтобы понять пример, сначала нужно узнать несколько методов.
Метод JQuery prop ()
Этот метод устанавливает / возвращает свойства и значения выбранных элементов.
Если мы используем этот метод для возврата значения свойства, он вернет значение первого выбранного элемента.
Если мы используем этот метод для установки значений свойств, он установит одну или несколько пар свойство / значение для набора выбранных элементов.
Синтаксис:
-
Возвращаем значение свойства:
Установите свойство и значение:
Установите свойство и значение, используя функцию:
Установите несколько свойств и значений:
JQuery метод removeAttr ()
Этот метод удаляет один или несколько атрибутов из сопоставленных элементов.
Синтаксис:
Параметры:
- атрибут: этот параметр является обязательным. Он указывает один или несколько атрибутов для удаления. Если хотите удалить несколько атрибутов, используйте пробел среди имен атрибутов.
Пример 1: В этом примере входной элемент активируется методом prop () путем установки для свойства disabled значения false.
В этой статье разберём методы jQuery для чтения, добавления, изменения и удаления DOM свойств. На практике подробно остановимся на рассмотрении таких свойств как disabled, checked и selected.
Что такое DOM-свойства элементов?
Когда браузер получает HTML код запрашиваемой страницы, он разбирает его и строит в соответствии с ним DOM дерево. При этом HTML-теги становятся объектами (узлами этого дерева), а атрибуты — их свойствами. При этом отражение атрибутов в соответствующие им DOM-свойства не всегда осуществляется один к одному. Почему так происходит, а также более детально узнать про DOM-свойства и HTML-атрибуты, и их отличия друг от друга можно в этой статье.
Другими словами, свойства элементов – это то, что находится в DOM, а атрибуты — это то, что находится в HTML. Так как в JavaScript мы работаем со страницей через DOM, то в большинстве случаев более корректно взаимодействовать именно с DOM-свойствами, а использовать HTML-атрибуты только тогда, когда мы осознанно хотим что-то получить или изменить в HTML.
HTML-атрибуты disabled, checked, selected и т.п.
Значения атрибутов ( disabled , checked , selected , hidden , readonly и т.п.) отличиаются от соответствующим им DOM-свойств. При этом значение атрибута — это всегда строка, а DOM-свойства — нет. Разные DOM-свойства могут иметь разные типы данных. Например, DOM-свойства disabled , checked , selected и тому подобные имеют логический тип.
Как же тогда они согласуются? Этот процесс описан в стандарте. В ооответсвии с ним, значение этих DOM-свойств ( disabled , checked и т.п.) равно true , когда такой атрибут присутсвует у тега и при этом не важно какое он имеет значение. В противном случае значения таких DOM-свойств равно false .
Методы jQuery для управления DOM-свойствами
В jQuery имеется два метода для управления DOM-свойствами элементов.
Первый метод — это prop .
Метод prop
Метод prop предназначен для выполнения различных операций над DOM-свойствами элементов.
Первая операция — это чтение значения DOM-свойства.
Синтаксис метода prop для получения значения DOM-свойства:
Пример, в котором рассмотрим принцип получения значения DOM-свойств с помощью метода prop :
Но DOM-свойства для элементов создаются не только в соответствии с теми атрибутами, которые есть у каждого из них в HTML. Для каждого элемента в соответствии с его встроенным классом создаётся целый набор стандартных для него DOM-свойств. Например, для элемента input (его класс HTMLInputElement ) создаётся один набор DOM-свойств, а для элемента a (его класс HTMLAnchorElement ) создаётся немного другой, но стандартный уже для него набор DOM-свойств.
Пример, в котором изменим значения DOM-свойств элемента:
Воторая операция — это изменение значения DOM-свойства.
Синтаксис метода prop для установления DOM-свойству нового знчаения:
Кроме этого варианта jQuery предлагает ещё два:
Пример, в котором изменим значения DOM-свойств элементов:
Пример, в котором установим заголовкам h2 и h3 , находящихся в элементе .article , идентификаторы, если их у данных элементов нет:
Удалить стандартное DOM-свойство у элемента нельзя. Но вы можете установить ему значение по умолчанию.
Пример, в котором установим для некоторого элемента, например button , значение DOM-свойства равным false .
Сейчас данный элемент в качестве значения DOM-свойства disabled имеет значение true , т.к. атрибут disabled присутствует у тега.
Теперь установим данному DOM-свойству значение false . Это изменение также повлияет на HTML код, данный атрибут будет убран у элемента. Это действие связано с тем, что браузер синхронизирует DOM и HTML код.
Пример, в котором переведём кнопку submit в активное состояние (т.е. установим ей свойство disabled равное false ) когда содержимое элемента input[name=»search»] не будет равно пустой строке:
Принцип работы с checked ничем не отличается от disabled .
Примеры работы с checked
1. Пример, в котором установим флажок checkbox, а затем снимем его у него через 5 секунд:
2. Пример, в котором будем перед отправкой формы проверять состояния checkbox #agree , и если он не установлен в true , то выводить некоторое сообщение и отменять отправку формы на сервер.
3. Пример, в котором выполним две операции, связанные с checked . Первое — это установим после загрузки страницы второму элементу radio состояние checked , равное true . Второе — это создадим обработчик для события change , который будет выводить в #log значение выбранного переключателя:
Пример работы с selected
Пример, в котором выполним несколько действий. Первое — это установим состояние selected второму option . Второе — это создадим обработчик для события change , который будет выводить в #log выбранный пункт.
Пользовательские DOM-свойства
Элементы в DOM не ограничиваются перечнем только стандартных (встроенных) для каждого из них свойств. К любому элементу в DOM пользователь может добавить свои собственные свойства.
По сути, DOM элементы (узлы) – это обычные объекты JavaScript. Следовательно, к ним, как и к любым другим объектам можно добавлять свои свойства.
Осуществляется это также с помощью метода prop. Данный метод используется, когда нужно добавить, изменить или прочитать пользовательское DOM-свойство.
Рассмотрим добавление собственного DOM-свойства к элементам на следующем примере.
В этом примере добавим к элементам .counter пользовательское DOM-свойство count , которое будем использовать для хранения количество нажатий (click-ов):
Пользовательские DOM-свойства не отображаются в HTML коде и ни каким образом не сказываются отрисовку этого элемента на странице.
Удаление пользовательского DOM-свойства у элемента осуществляется с помощью метода removeProp .
Синтаксис метода removeProp:
Данный метод предназначен исключительно для удаления собственных DOM-свойств. Удалить стандартные (встроенные) DOM-свойства у элементов нельзя, вы можете им просто установить значение по умолчанию.
Пример, в котором будем добавлять и удалять у элемента #paragraph пользовательское DOM-свойство при нажатии соответственно на ту или иную кнопку:
Управление состоянием checked, disabled, selected через HTML-атрибуты
Изменять состояние checked, disabled, selected более предпочтительно через соответствующее DOM-свойство.
Но, тем не менее можно выполнять это и через HTML-атрибуты.
Например, чтобы перевести кнопку в неактивное состояние (disabled), ей нужно просто добавить HTML атрибут disabled .
Для выполнения обратного действия, перевода элемента в активное состояние у него нужно удалить этот атрибут:
Для управления состоянием checked , readonly необходимо выполнять аналогичные действия.
В приведённом выше примере мы добавляли и удаляли атрибут disabled у элемента. При этом браузер при изменении HTML кода элемента синхронизировал его с DOM, т.е. при добавлении HTML-атрибута disabled устанавливал соответствующему DOM-свойству в данном случае disabled значение true , а при удалении этого HTML-атрибута – устанавливал false .
Браузер также выполняет синхронизацию наоборот, т.е. при изменении DOM изменяет HTML код. Для DOM-свойств с логическим типом это работает так, с другими по-другому. Например, с id , class и style синхронизация происходит точь в точь, а например, с value синхронизация туда и обратно не работает.
Статья, которая может быть вам также интересной:
