Как сделать кнопку зависимую от чекбоксов? [закрыт]
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 4 года назад .
У меня есть таблица в которой в каждой строке по чекбоксу и есть кнопка вне таблицы. Надо чтобы если хоть один чекбокс выбран кнопка была активной — иначе не активной ( disabled ). Проблема в том что disabled это атрибут, а не стиль. Значит через CSS это не сделаешь. Я пытался через jquery повесить на все чекбоксы событие change и в нем менять активность кнопки, но это корявое решение которое не всегда работает почему-то. Есть способ получше? P.S. Забыл уточнить. На этой странице используется Pjax для обновления данных таблицы (проект на Yii2). Возможно из-за него как раз и проблема с рандомно работающими событиями.
Как сделать активацию кнопки после нажатия на checkbox?
Нужно сделать так, чтобы кнопка была активна только после того, как пользователь поставит чекбокс.
Код чекбокса:
Все выглядит примерно так.
- Вопрос задан более года назад
- 391 просмотр
Как сделать кнопку неактивной, пока не отмечен чекбокс с помощью JS
Задача. На одном проекте использовалась форма Contact Form 7 и по какой-то причине, там не срабатывало своство блокировки кнопки отправки формы при неотмеченном чекбоксе согласия с правилами обработки данных.
Пример:
Обязазательное условие соглашение 1
Обязазательное условие соглашение 2
Отправить
Решение. Используем JavasScript. Для кнопки нужно предусмотреть отдельный класс который будет давать ей серый цвет и прописать в стилях. Вешаем обработчик событий по клику на чекбоксы, с функцией, которая будет проверять у чекбоксов параметр checked на true / false, т.е. поставили галочку на чекбоксе или нет. Если оба чекбокса «true», то функция должна удалить у кнопки класс отвечающий за задание серого цвета.
Как создать стилизованные чекбоксы и радио-кнопки
Узнайте, как создать красивые стилизованные чекбоксы и радио-кнопки с помощью HTML, CSS и JavaScript в нашей практической статье!
Алексей Кодов
Автор статьи
2 июня 2023 в 11:29
В этой статье мы рассмотрим, как создать стилизованные чекбоксы и радио-кнопки с помощью HTML, CSS и немного JavaScript. Это поможет сделать ваш сайт более красивым и пользовательским. ��
Основы стилизации чекбоксов и радио-кнопок
Чтобы начать стилизацию, нам нужно сначала создать основной HTML-код для чекбоксов и радио-кнопок. Вот базовый пример:
Теперь, когда у нас есть базовый код, давайте перейдем к стилизации.
Стилизация чекбоксов
Чтобы стилизовать чекбоксы, мы должны спрятать оригинальный чекбокс и добавить кастомный элемент, который будет отображать состояние чекбокса.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Шаг 1: Скрыть оригинальные чекбоксы
input[type=»checkbox»]
Шаг 2: Добавить кастомный элемент
Шаг 3: Стилизация кастомного элемента
.custom-checkbox
Шаг 4: Изменение стиля при выборе чекбокса
input[type=»checkbox»]:checked + .custom-checkbox
Стилизация радио-кнопок
Стилизация радио-кнопок аналогична стилизации чекбоксов, но с некоторыми различиями.
Шаг 1: Скрыть оригинальные радио-кнопки
input[type=»radio»]
Шаг 2: Добавить кастомный элемент
Шаг 3: Стилизация кастомного элемента
.custom-radio
Шаг 4: Изменение стиля при выборе радио-кнопки
input[type=»radio»]:checked + .custom-radio
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
�� Теперь у вас есть красивые стилизованные чекбоксы и радио-кнопки на вашем сайте!
Не забывайте, что вы также можете добавить различные анимации или изменить цвета и размеры, чтобы сделать их еще более привлекательными для пользователей.
Удачи в веб-разработке и изучении новых техник! ��