Как сделать кнопку зависимую от чекбоксов? [закрыт]
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 4 года назад .
У меня есть таблица в которой в каждой строке по чекбоксу и есть кнопка вне таблицы. Надо чтобы если хоть один чекбокс выбран кнопка была активной — иначе не активной ( disabled ). Проблема в том что disabled это атрибут, а не стиль. Значит через CSS это не сделаешь. Я пытался через jquery повесить на все чекбоксы событие change и в нем менять активность кнопки, но это корявое решение которое не всегда работает почему-то. Есть способ получше? P.S. Забыл уточнить. На этой странице используется Pjax для обновления данных таблицы (проект на Yii2). Возможно из-за него как раз и проблема с рандомно работающими событиями.
Чекбоксы в виде кнопок
В продолжении статьи о стилизации чекбоксов, несколько примеров как стилизовать чекбоксы в кнопки и группы кнопок.
Кнопки
HTML-разметка:
Фокус по клавише Tab:
$(window).keyup(function(e) < var target = $('.checkbox-btn input:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('.checkbox-btn input').focusout(function()< $(this).parent().removeClass('focused'); >);CSS-стили:
.checkbox-btn < display: inline-block; margin: 0 5px 0 0; user-select: none; position: relative; >.checkbox-btn input[type=checkbox] < z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-btn span < display: inline-block; cursor: pointer; padding: 0px 10px; line-height: 30px; border: 1px solid #999; border-radius: 4px; transition: background 0.2s ease; >/* Checked */ .checkbox-btn input[type=checkbox]:checked + span < background: #ffe0a6; >/* Focus */ .focused span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-btn:hover < color: #666; >/* Active */ .checkbox-btn input[type=checkbox]:active:not(:disabled) + span < background: #d2c5ac; color: #000; >/* Disabled */ .checkbox-btn input[type=checkbox]:disabled + span < background: #efefef; color: #666; cursor: default; >.checkbox-btn input[type=checkbox]:checked:disabled + span
Результат:
Группа кнопок
HTML-разметка:
Checkbox #1 Фокус по клавише Tab:
$(window).keyup(function(e) < var target = $('.checkbox-btn-group input:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('.checkbox-btn-group input').focusout(function()< $(this).parent().removeClass('focused'); >);CSS-стили:
.checkbox-btn-group < display: inline-block; >.checkbox-btn-group:after < content: ""; clear: both; display: block; >.checkbox-btn-group label < display: inline-block; float: left; margin: 0; user-select: none; position: relative; >.checkbox-btn-group input[type=checkbox] < z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-btn-group span < display: inline-block; cursor: pointer; padding: 0px 10px; line-height: 30px; border: 1px solid #999; border-right: none; transition: background 0.2s ease; >.checkbox-btn-group label:first-child span < border-radius: 4px 0 0 4px; >.checkbox-btn-group label:last-child span < border-radius: 0 4px 4px 0; border-right: 1px solid #999; >/* Checked */ .checkbox-btn-group input[type=checkbox]:checked + span < background: #ffe0a6; >/* Focus */ .checkbox-btn-group .focused span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-btn-group label:hover < color: #666; >/* Active */ .checkbox-btn-group input[type=checkbox]:active:not(:disabled) + span < background: #d2c5ac; color: #000; >/* Disabled */ .checkbox-btn-group input[type=checkbox]:disabled + span < background: #efefef; color: #666; cursor: default; >.checkbox-btn-group input[type=checkbox]:checked:disabled + span
Как создать стилизованные чекбоксы и радио-кнопки
Узнайте, как создать красивые стилизованные чекбоксы и радио-кнопки с помощью HTML, CSS и JavaScript в нашей практической статье!
Алексей Кодов
Автор статьи
2 июня 2023 в 11:29
В этой статье мы рассмотрим, как создать стилизованные чекбоксы и радио-кнопки с помощью HTML, CSS и немного JavaScript. Это поможет сделать ваш сайт более красивым и пользовательским. ��
Основы стилизации чекбоксов и радио-кнопок
Чтобы начать стилизацию, нам нужно сначала создать основной HTML-код для чекбоксов и радио-кнопок. Вот базовый пример:
Теперь, когда у нас есть базовый код, давайте перейдем к стилизации.
Стилизация чекбоксов
Чтобы стилизовать чекбоксы, мы должны спрятать оригинальный чекбокс и добавить кастомный элемент, который будет отображать состояние чекбокса.
Python-разработчик: новая работа через 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
Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
�� Теперь у вас есть красивые стилизованные чекбоксы и радио-кнопки на вашем сайте!
Не забывайте, что вы также можете добавить различные анимации или изменить цвета и размеры, чтобы сделать их еще более привлекательными для пользователей.
Удачи в веб-разработке и изучении новых техник! ��
Как сделать активацию кнопки после нажатия на checkbox?
Нужно сделать так, чтобы кнопка была активна только после того, как пользователь поставит чекбокс.
Код чекбокса:
Все выглядит примерно так.
- Вопрос задан более года назад
- 420 просмотров