Добавление и удаление DOM-свойств на jQuery
Когда браузер получает HTML-код запрашиваемой страницы, он разбирает его и строит в соответствии с ним DOM-дерево. При этом HTML-теги становятся объектами (узлами этого дерева), а атрибуты — их свойствами. При этом значения DOM-свойств может отличаться от соответствующих им атрибутов. Почему так происходит, а также более подробно узнать про DOM-свойства и атрибуты, и чем они отличаются друг от друга, можно в этой статье.
В качестве заключения можно отметить, что в большинстве случаев нужно работать с этими сущностями как с DOM-свойствами, а операции с атрибутами оставлять только для реализации тех моментов в которых это действительно нужно.
Атрибуты disabled, checked, selected и т.п
Значения атрибутов ( disabled , checked , selected , hidden , readonly и т.п.) отличиаются от соответствующим им DOM-свойств. При этом значение атрибута — это всегда строка, а DOM-свойства — нет. Разные DOM-свойства могут иметь разные типы данных. Например, DOM-свойства disabled , checked , selected и другие, подобные этим, имеют логический тип.
Как в этом случае определяется значение этих DOM-свойств? Этот процесс описан в стандарте. В ооответсвии с ним, значение этих 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 . Это изменение также повлияет на соответствующий ему атрибут. Он будет убран у элемента.
Пример, в котором переведём кнопку 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 через атрибуты
Изменять состояние checked, disabled, selected более предпочтительно через соответствующее DOM-свойство.
Но, тем не менее можно выполнять это и через атрибуты.
Например, чтобы перевести кнопку в неактивное состояние (disabled), ей нужно просто добавить атрибут disabled .
Для выполнения обратного действия, перевода элемента в активное состояние у него нужно удалить этот атрибут:
Для управления состоянием checked , readonly необходимо выполнять аналогичные действия.
В приведённом выше примере мы добавляли и удаляли атрибут disabled у элемента. При этом браузер при изменении атрибута изменял и значение соответствующему ему DOM-свойству. Т.е. при добавлении атрибута disabled устанавливал соответствующему DOM-свойству в данном случае disabled значение true , а при удалении этого атрибута – устанавливал false .
Браузер также при изменении значения DOM-свойства элемента, изменяет и его атрибут. Для DOM-свойств с логическим типом это работает так, с другими по-другому. Например, с id , class и style изменения происходяи один к одному, а например, с value изменения один к одному не работают.
javascript remove "disabled" attribute from html input
How can I remove the «disabled» attribute from an HTML input using javascript?
at onClick I want my input tag to not consist of «disabled» attribute.
6 Answers 6
Set the element’s disabled property to false:
If you’re using jQuery, the equivalent would be:
For several input fields, you may access them by class instead:
Where document could be replaced with a form, for instance, to find only the elements inside that form. You could also use getElementsByTagName(‘input’) to get all input elements. In your for iteration, you’d then have to check that inputs[i].type == ‘text’ .
JavaScript removeAttribute
Summary: in this tutorial, you will learn how to use the JavaScript removeAttribute() to remove the attribute with the specified name from the element.
Introduction to JavaScript removeAttribute() method
The removeAttribute() removes an attribute with a specified name from an element:
Parameters
The removeAttribute() accepts an argument which is the name of the attribute that you want to remove. If the attribute does not exist, the removeAttribute() method wil not raise an error.
Return value
The removeAttribute() returns a value of undefined .
Usage notes
HTML elements have some attributes which are Boolean attributes. To set false to the Boolean attributes, you cannot simply use the setAttribute() method, but you have to remove the attribute entirely using the removeAttribute() method.
For example, the values of the disabled attributes are true in the following cases:
Similarly, the values of the following readonly attributes are true :
JavaScript removeAttribute() example
The following example uses the removeAttribute() method to remove the target attribute from the link element with the id js :
Атрибут disabled в JavaScript
В HTML существуют специальные атрибуты без значений, например, атрибут disabled , используемый для блокировки элементов. Для того, чтобы установить такой атрибут, соответствующему свойству требуется присвоить значение true , а чтобы убрать — значение false .
Давайте посмотрим на практике. Пусть у нас есть заблокированый инпут:
Давайте выведем значение атрибута disabled этого инпута:
А теперь давайте отблокируем его:
Дан инпут и кнопка. По нажатию на кнопку заблокируйте инпут.
Дан инпут и две кнопки. Пусть нажатие на первую кнопку блокирует инпут, а нажатие на вторую — отблокирует.
Дан инпут и кнопка. По нажатию на кнопку узнайте, заблокирован инпут или нет.