Добавить атрибут disabled javascript

Element.setAttribute()

Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.

Синтаксис

element.setAttribute(name, value);

Пример

В следующем примере, setAttribute() используется, чтобы установить атрибут disabled кнопки , делая её отключённой.

var b = document.querySelector("button"); b.setAttribute("disabled", "disabled"); 

Примечания

При вызове на элементе внутри HTML документа, setAttribute переведёт имя атрибута в нижний регистр.

Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.

Несмотря на то, что метод getAttribute() возвращает null у удалённых атрибутов, вы должны использовать removeAttribute() (en-US) вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой «null» , которая, вероятно, не то, что вы хотите.

Использование setAttribute() для изменения определённых атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure(‘value’, val).

Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay элемента , используйте null или пустое значение. Например: elt.setAttribute(‘autoplay’, »)

Методы DOM имеют дело с атрибутами элементов:

Не знают пространства имён, наиболее часто используемые методы	Вариант, знающий пространство имён (Уровень DOM 2)	Уровень DOM 1 методы для работы с Attr узлами напрямую (используется редко)	Уровень DOM 2 знает о методах пространства имён для работы с Attr узлами напрямую (используется редко)
setAttribute (DOM 1)	setAttributeNS (en-US)	setAttributeNode (en-US)	setAttributeNodeNS (en-US)
getAttribute (DOM 1)	getAttributeNS (en-US)	getAttributeNode (en-US)	getAttributeNodeNS (en-US)
hasAttribute (DOM 2)	hasAttributeNS (en-US)	—	—
removeAttribute (DOM 1)	removeAttributeNS (en-US)	removeAttributeNode (en-US)	—

Спецификация

Found a content problem with this page?

This page was last modified on 21 июн. 2023 г. by MDN contributors.

Источник

Как добавить кнопке disabled через JavaScript?

Войдите, чтобы написать ответ

Как ускорить итерацию в два раза?

Как правильно отслеживать состояние формы?

Как заставить функцию дождаться выполнения промиса?

Как лучше сделать прокрутку фоновой картинки?

Как задать автопепревод в кастомном виджете?

Почему высвечивается ошибка 401, если API key уже активирован?

Ошибка при обращении к апи chat gpt, как быть?

Как работают параметры по умолчанию?

Есть бесплатный аналог CKEditor?

Как передать строку, сформированную при помощи JS, в Livewire?

Минуточку внимания

• Как правильно сформулировать индексы?
  • 2 подписчика
  • 1 ответ
  • 1 подписчик
  • 2 ответа
  • 3 подписчика
  • 3 ответа
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 3 ответа

  Источник

  Добавить атрибут disabled javascript

  Last updated: Jan 11, 2023
  Reading time · 3 min

  

  # Set the disabled Attribute using JavaScript

  To set the disabled attribute, select the element and call the setAttribute() method on it, passing it disabled as the first parameter.

  The setAttribute method will add the disabled attribute to the element.

  Here is the HTML for the examples.

  Copied! 
  DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> button id="btn">Buttonbutton> script src="index.js"> script> body> html> 

  And here is the related JavaScript code.

  Copied! 
  const button = document.getElementById('btn'); // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute // button.removeAttribute('disabled'); 

  

  If you need to remove the disabled attribute, use the removeAttribute() method.

  Copied! 
  const btn = document.getElementById('btn'); // ✅ Remove disabled attribute from button btn.removeAttribute('disabled'); // ✅ Add disabled attribute to button // btn.setAttribute('disabled', ''); 

  We used the document.getElementById method to select the element by its id .

  We then used the setAttribute method to add the disabled attribute to the button.

  The method takes the following 2 parameters:

  1. name — the name of the attribute to be set.
  2. value — the value to assign to the attribute.

  If the attribute already exists on the element, the value is updated, otherwise, a new attribute is added with the specified name and value.

  When setting the value of a boolean attribute, such as disabled , we can specify any value for the attribute and it will work.

  If a boolean attribute is not present, the value of the attribute is considered to be false .

  If you need to remove an attribute, use the removeAttribute method.

  Copied! 
  const button = document.getElementById('btn'); // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute button.removeAttribute('disabled'); 

  When setting the disabled attribute, we pass an empty string as the value for the attribute because it’s a best practice to set boolean attributes without a value.

  The disabled attribute can be set to any value and as long as it is present on the element, it does the job.

  # Setting the disabled attribute on multiple elements

  Note that you can only call the setAttribute method on DOM elements.

  If you need to set the disabled attribute on a collection of elements, you have to iterate over the collection and call the method on each element.

  Here is the HTML for the next example.

  Copied! 
  DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> button class="btn">Buttonbutton> button class="btn">Buttonbutton> button class="btn">Buttonbutton> script src="index.js"> script> body> html> 

  And here is the related JavaScript code.

  Copied! 
  const buttons = document.querySelectorAll('.btn'); for (const button of buttons)  // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute // button.removeAttribute('disabled'); > 

  

  We used the document.querySelectorAll method to select all elements with a class of btn .

  We used the for. of loop to iterate over the collection and set the disabled attribute on each element.

  # Removing the disabled attribute from multiple elements

  Note that you should only call the removeAttribute() method on DOM elements. If you need to remove the disabled attribute from a collection of elements, you have to iterate over the collection and call the method on each individual element.

  Here is the HTML for the next example.

  Copied! 
  DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> button disabled class="btn">Buttonbutton> button disabled class="btn">Buttonbutton> button disabled class="btn">Buttonbutton> script src="index.js"> script> body> html> 

  And here is the related JavaScript code.

  Copied! 
  const buttons = document.querySelectorAll('.btn'); for (const button of buttons)  // ✅ Remove disabled attribute from button button.removeAttribute('disabled'); > 

  

  We used the document.querySelectorAll method to select all elements with a class of btn .

  We used the for. of loop to iterate over the collection and remove the disabled attribute from each element.

  # Additional Resources

  You can learn more about the related topics by checking out the following tutorials:

  I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

  Источник

  Set the “disabled” Attribute Using JavaScript

  

  While creating web pages or sites involving user interaction, there can be a requirement to fill out a form or a questionnaire having case-sensitive fields. For instance, inputting name, password, etc. In addition, restricts the user from entering a field or submitting a form if a particular requirement is satisfied. In such case scenarios, setting the disabled attribute using JavaScript becomes very helpful in providing a mode of communication between the developer and the end user.

  This article will illustrate how to set the disabled attribute in JavaScript.

  How to Set the “disabled” Attribute in JavaScript?

  The “disabled” attribute can be set with the help of the “setAttribute()” method. The setAttribute() method assigns a particular value to an attribute. This method can be applied to assign an element a particular attribute.

  • “name” specifies the attribute’s name.
  • “value” corresponds to the new attribute’s value.

  Let’s follow the below-given examples.

  Example 1: Set the “disabled” Attribute of an Input Field

  In this example, a single input field will be disabled upon the button click.

  Let’s observe the below-given example:

  In the above lines of code:

  • Include an input field having the specified “id” and a “placeholder” value.
  • Also, create a button having an attached “onclick” event redirecting to the function setDisable().
  • In the JavaScript part of the code, declare a function named “setDisable()”. In its definition, access the included input field using its “id” in the “getElementById()” method.
  • Lastly, apply the “setAttribute()” method such that the fetched element in the previous step is assigned the attribute “disabled”.
  • This will result in disabling the input field upon the button click.

  From the above output, it can be observed that the input field becomes disabled upon the button click.

  Example 2: Set the “disabled” Attribute With the Help of a Boolean Value

  In this example, the disabled attribute will be allocated a boolean value to perform the desired functionality.

  The following example explains the stated concept:

  According to the above code snippet:

  • Allocate an input “textarea” element having the stated “id”.
  • Also, create a button having an “onclick” event which will invoke the function setDisable().
  • In the JavaScript part of the code, define a function named “setDisable()”. In its definition, similarly, access the included text area, apply the “setAttribute()” method and assign it a boolean value “true”, respectively.
  • This will resultantly disable the input text area upon the button click.

  The “disabled” attribute is set in a proper manner.

  Example 3: Set the “disabled” Attribute to Multiple Elements

  This example will result in setting the “disabled” attribute such that various elements will become disabled upon the button click at the same time.

  Let’s overview the below-given example:

  Go through the following steps as given in the above code snippet:

  • Firstly, include the input “text fields” and a “checkbox” element, respectively having the specified class.
  • Likewise, create a button having an “onclick” event invoking the function setDisable().
  • In the JavaScript part of the code, declare a function named “setDisable()”. In its definition, access the included elements using the “getElementsByClassName()” method.
  • After that, apply the “for” loop. Within the loop, apply the “setAttribute()” method such that all the included elements become disabled upon the button click.

  From the above output, it is evident that all the elements become disabled upon the button click.

  Conclusion

  The “setAttribute()” method can be implemented by taking different parameters to set the disabled attribute using JavaScript. This method can be applied to an input field with or without an assigned boolean value. It can also be utilized to disable multiple elements at the same time. This tutorial explained how to set the disable attribute using JavaScript.

  About the author

  Umar Hassan

  I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.

  Источник