Как сделать input неактивными?
Как сделать сделать ввод чисел в Input формы строго по нужному диапазону?
Здравствуйте уважаемые Коллеги! У меня есть переменная JS с количеством товаров на складе var.
Как сделать чтобы placeholder у input не пропадал?
Есть input для ввода мобильного телефона, поставил "placeholder +38(0__)__-__-___ " и нужно что бы.
Как сделать выбранный input валидным, если он не заполнен?
var currentTab = 0; // Current tab is set to be the first tab (0) showTab(currentTab); // Display.
Как сделать компоненты строки активными/неактивными?
Имеется таблица следуещего формата: 1 столбец: field1 (input-checkbox) 2 столбец: field2 3.
2169 / 1652 / 840
Регистрация: 10.01.2015
Сообщений: 5,186
Сообщение было отмечено noname12345 как решение
Решение
Сообщение от noname12345 
Курсы javascript
Наверно, я не полностью сформулировал вопрос. В Chrome и IE сразу после загрузки страницы чекбокс не выделен и поле для текста активно, по крайней мере у меня именно так. Поле становится неактивным, если поставить, а затем снять галочку.
Может я что-то не так делаю? Подскажите.
20.07.2012, 19:07
без статуса
Регистрация: 25.05.2012
Сообщений: 8,219
20.07.2012, 19:09
Регистрация: 03.05.2011
Сообщений: 848
либо так (18 строка), либо нарисуйте атрибут disabled у текстового поля изначально.
20.07.2012, 19:41
Интересующийся
Регистрация: 20.07.2012
Сообщений: 11
Спасибо, получилось с атрибутом disabled.
21.07.2012, 12:08
Интересующийся
Регистрация: 20.07.2012
Сообщений: 11
Еще возник вопрос. Если я таким образом пытаюсь включить несколько подряд инпутов, то это не работает. При этом работает, если ставить галки начиная от последнего элемента к первому по порядку. Работает только отдельно какой-либо из выбранных, а остальные неактивны. Как это реализовать?
Последний раз редактировалось nraw, 21.07.2012 в 12:27 .
21.07.2012, 12:36
Регистрация: 22.03.2012
Сообщений: 3,744
21.07.2012, 14:02
Интересующийся
Регистрация: 20.07.2012
Сообщений: 11
У меня элементы input находятся в ячейках таблицы
поэтому код не работает, а точнее работает частично (только в колонке «Количество»). Если я правильно понял, не работают эти строки?
var inp = target.parentNode.children; var len = inp.length;
Последний раз редактировалось nraw, 21.07.2012 в 14:18 .
21.07.2012, 14:28
что-то знаю
Регистрация: 24.05.2009
Сообщений: 5,176
elem.setAttribute('disabled', 'disabled'); // сделать неактивной elem.removeAttribute('disabled'); // сделать активной // кроссбраузерно
| Страница 1 из 3 | 1 | 2 | 3 | > |
:disabled , :enabled
Эта кнопка серая. Она не доступна для клика. Как написать селектор на основе состояния элемента?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 1 августа 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.
Легко применяются к любым элементам, которым можно задать атрибут disabled : , , , , , , , и .
Пример
Скопировать ссылку «Пример» Скопировано
Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled . Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled .
Кнопка будет полупрозрачной:
button:disabled opacity: 0.5;>button:disabled opacity: 0.5; >
Псевдокласс :enabled , наоборот, поможет стилизовать все доступные для взаимодействия элементы. По факту его чаще всего не указывают, потому что записи с ним и без него, как правило, равноценны: .input = .input : enabled .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled .
Как понять
Скопировать ссылку «Как понять» Скопировано
Браузер ориентируется на атрибут disabled и, в зависимости от его наличия или отсутствия, добавляет элементу состояние enabled — доступен, или disabled — недоступен.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Даже если дизайнер забыл про неактивное состояние, обязательно прописывайте его в стилях, чуть приглушая фоновый цвет или делая элемент полупрозрачным — чтобы пользователь точно знал, что с этим элементом взаимодействовать нельзя.
�� enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора .input , вы закрываете сценарий с активным элементом.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом disabled , потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс disabled .
Код для кнопки из моего последнего проекта:
Стили для активной кнопки в обычном состоянии:
.additional-btn padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none;>.additional-btn padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none; >
Стили для кнопки при наведении курсора или клике:
.additional-btn:active,.additional-btn:hover color: #FF5050; transition: none;>.additional-btn:active, .additional-btn:hover color: #FF5050; transition: none; >
Стили для кнопки, когда она неактивна:
.additional-btn:disabled cursor: default; color: #A44234;>.additional-btn:disabled cursor: default; color: #A44234; >
Неактивная кнопка submit (атрибут DISABLED) 
Иногда на сайте необходимо сделать форму, в которую пользователь вводит какие-либо данные. Полей в форме может быть сколько угодно, однако всегда есть поля обязательные для заполнения. Как же проверить, заполнил пользователь нужное поле или нет. Есть два пути:
- Проверка в обработчике, т.е. пользователь заполняет нужные поля, отправляет форму, а дальше обработчик проверяет обязательные поля, и если какое либо поле не заполнено – возвращает пользователя обратно. Все просто, однако необходим механизм для передачи значений уже заполненных полей обратно в форму, который можно реализовать с помощью сессий, однако это не очень удобно.
- Проверка методами JavaScript – все гораздо проще (в плане работы самой формы). Задаем каждому полю событие onchange или любое другое реагирующее на действие пользователя (ну не onmouseover конечно, хотя наверное можно сделать даже забавно…), после которого написанная нами функция будет проверять , заполнены ли обязательные поля и разрешать или запрещать кнопку submit.
Первый вариант относится больше к разделу PHP, поэтому пока рассматриваться не будет. Рассмотрим более подробно второй. Первое что нам необходимо – сама форма:
Как видите, у кнопки Submit имеется атрибут disabled в значении disabled. Также у каждого поля формы есть событие onchange, при котором вызывается функция EnableButton(). Что же из себя представляет данная функция? Допустим, полями, обязательными для заполнения, являются field1 и field3, тогда функция EnableButton() будет выглядеть так:
К сожалению, я не нашел в JavaScript аналога PHP функции empty(), поэтому значения полей приходится сравнивать с пустой строкой. Еще на что стоит обратить внимание – оператор with (document.forms.form1). Для тех кто не знаком с JavaScript – выражение в скобках оператора with будет добавляться ко всем объектам, что позволяет значительно сократить запись функции. Без with EnableButton() выглядела бы следующим образом:
Согласитесь – довольно громоздко.
В продолжении стоить отметить, что атрибут disabled можно использовать для любого элемента формы. Пример – заполнение информации о фирме – юридический и почтовый адрес. Два поля для двух адресов, однако можно добавить флажок checkbox (- совпадает с юридическим), отметив который, пользователь укажет что поле почтовый адрес обрабатывать не надо и можно добавить ему атрибут disabled.