Атрибут disabled в JavaScript
В HTML существуют специальные атрибуты без значений, например, атрибут disabled , используемый для блокировки элементов. Для того, чтобы установить такой атрибут, соответствующему свойству требуется присвоить значение true , а чтобы убрать — значение false .
Давайте посмотрим на практике. Пусть у нас есть заблокированый инпут:
Давайте выведем значение атрибута disabled этого инпута:
let elem = document.querySelector(‘#elem’); console.log(elem.disabled); // выведет true
А теперь давайте отблокируем его:
let elem = document.querySelector(‘#elem’); elem.disabled = false;
Дан инпут и кнопка. По нажатию на кнопку заблокируйте инпут.
Дан инпут и две кнопки. Пусть нажатие на первую кнопку блокирует инпут, а нажатие на вторую — отблокирует.
Дан инпут и кнопка. По нажатию на кнопку узнайте, заблокирован инпут или нет.
Как убрать атрибут disabled у формы?
Всем привет!
Задача,которая стоит передо мной стоит: При нажатии на кнопку,атрибут disabled у fieldset должен убираться. Я использую очевидное решение,но не работает,вот это и вводит меня в ступор.
Код: https://jsfiddle.net/g1hxfcdm/5/
- Вопрос задан более трёх лет назад
- 1624 просмотра
Комментировать
Решения вопроса 2
Антон @hummingbird
Конкретно для одного fieldset правильно так:
var allFieldsets = document.querySelectorAll('fieldset')[0] // Это потому что вы в ответ получаете массив:
var allFieldsets = document.querySelectorAll('fieldset') // NodeList []Ответ написан более трёх лет назад
Mikhail Rerberg @NooNoo Автор вопроса
Не прокатило,все равно не откликается.
Антон @hummingbird
Антон @hummingbird
Mikhail, этот вариант точно рабочий. Вы неправильно кнопку получали.
Mikhail Rerberg @NooNoo Автор вопроса
Антон, Помогло,благодарю!
Антон @hummingbird
Mikhail, рад был помочь.
Stalker_RED @Stalker_RED
Две ошибки:
1. кнопки нет
2. querySelectorAll возвращает NodeList, и у него нет метода removeAttribute
var mainPin = document.querySelector('button'); var allFieldsets = document.querySelector('fieldset'); // вместо querySelectorAll mainPin.addEventListener('mouseup', function () < allFieldsets.removeAttribute('disabled'); >);вот это и вводит меня в ступор
В любой непонятной ситуации смотрите логи. в данном случае f12, чтобы открыть консоль, и там красненьким ошибки.
Ответ написан более трёх лет назад
Mikhail Rerberg @NooNoo Автор вопроса
Я просто не добавил в fiddle кнопку,косяк.
У меня несколько этих полей,поэтому я использовал querySelectorAll,это тоже обновил в фиддле
Stalker_RED @Stalker_RED
Mikhail, и все должны разблокироваться одной кнопкой?
[. allFieldsets].forEach(fieldset=>fieldset.removeAttribute('disabled'))Как удалить атрибут disabled у button?
Доброго времени суток, подскажите как удалить атрибут disabled в данном случае?
мои попытки не увенчались успехом:
document.getElementsByTagName('button')[0].removeAttribute('disabled'); document.getElementsByTagName("slds-button slds-button_stretch slds-col slds-button_brand").removeAttribute('disabled'); document.getElementsByClassName("slds-button slds-button_stretch slds-col slds-button_brand").removeAttribute('disabled'); document.getElementsByClassName("slds-button slds-button_stretch slds-col slds-button_brand").disabled = false;- Вопрос задан более двух лет назад
- 451 просмотр
2 комментария
Простой 2 комментария
Fozzy777 @Fozzy777 Автор вопроса
Вот, пытался, не получается(
Используйте console.log( document.querySelector(‘button’) );
И откройте консоль в браузере.
Чтобы понять что то, что выбирается в селекторе, это не тот элемент что вам нужен.
Значит нужно в селектор добавить доп условия:
console.log( document.querySelector('button') ); var disabledbutton = document.querySelector('button[title="Continue"]'); disabledbutton.disabled = false;Решения вопроса 0
Ответы на вопрос 3
Нелинейный наставник
Вы ищете несколько элементов а не 1
Не работает тк как вы не можете применить к масиву «.disabled»
document.querySelector(‘button’).disabled = false
Ответ написан более двух лет назад
Комментировать
Нравится 2 Комментировать
В целом ответ вам дан, добавлю что если вы не хотите делать перебор массива, то можете воспользоваться jquery:
$("button .slds-button") .prop( "disabled", false );В большинстве конструкторов/движков он уже встроен.
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
ThunderCat @ThunderCat Куратор тега JavaScript
Во первых — вы изначально дали неверные данные в вопросе, и несмотря на наличие верного ответа на него не смогли адаптировать его к полному коду.
Во вторых — всегда есть возможность проверить что происходит в вашем коде, например что выберет ваш селектор, магия console.log() в действии.
Ну и в третьих — чтение документации, которым вы пренебрегаете — document.querySelector() выбирает один первый подходящий элемент, которым в вашем примере будет совсем другая кнопка.
Element.removeAttribute()
Вы должны использовать removeAttribute вместо того, чтобы устанавливать значение атрибута в null, используя setAttribute.
Попытка удаления атрибута, которого нет на элементе не вызывает ошибки.
Методы 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?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.