jQuery селектор :enabled

Определение и применение

jQuery селектор :enabled выбирает все элементы, которые активны . Этот селектор проверяет состояние элемента, а не только наличие его собственного атрибута: например, поле внутри отключённого <fieldset> тоже может быть отключено.

Примечание

Обращаю Ваше внимание, что jQuery селектор :enabled применяется только к следующим элементам:

<button> (кнопка).
<input> (пользовательское поле для ввода информации).
<optgroup> (группировка связанных данных в раскрывающемся списке).
<option> (пункт списка).
<select> (раскрывающийся (выпадающий) список).
<textarea> (область многострочного ввода).
<menuitem> (определяет элемент меню).
<fieldset> (служит для визуальной группировки элементов).

jQuery синтаксис:

JavaScript

$(":enabled")

Добавлен в версии jQuery

1.0

Селектор в CSS

CSS псевдокласс enabled.

Пример использования

Селектор :enabled — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<form>
  <input type="text" /><br /><br />
  <input type="text" disabled="" /><br /><br />
  <button>Кнопка</button><br /><br />
  <button disabled="">Кнопка</button>
</form>

main.js

JavaScript

$(document).ready(function () {
    $(':enabled').css('border', '2px solid green') // выбираем все элементы, которые не имеют логического атрибута disabled.
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :enabled мы выбрали и стилизовали все элементы <input> и <button>, которые не имеют логического атрибута disabled.