Как назначать класс в зависимости от состояния чекбокса?

Question

Stacy None @Stasy11

The best epta

JavaScript

Как назначать класс в зависимости от состояния чекбокса?

Есть чекбокс:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

Есть кнопка:

<button class="btn btn-outline-warning m2-3 disabled" type="submit">Отправить</button>

Как у кнопки удалять/добавлять класс "disabled" в зависимости от состояния чекбокса?

Вопрос задан более трёх лет назад
99 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

9 комментариев

Stacy None @Stasy11 Автор вопроса
Супер! А как быть если это не css класс будет а атрибут к примеру:
<button class="btn btn-outline-warning m2-3" type="submit" disabled>Отправить</button>
Написано более трёх лет назад

Павел @PavelMonro

Stacy None,

$(function() {
if($('#customSwitch1').is(':checked')) {
$( 'button[type="submit"]' ).prop("disabled", false);
} else {
 $( 'button[type="submit"]' ).prop("disabled", true);
}
});

Написано более трёх лет назад

Stacy None @Stasy11 Автор вопроса

Павел, не работает почему-то
У меня не input кнопка а button, не знаю как изменить(

Написано более трёх лет назад
Павел @PavelMonro

Stacy None, поправил на бутон

Написано более трёх лет назад

Stacy None @Stasy11 Автор вопроса

Павел,
неа, не хочет )

$(function() {
if($('#customSwitch1').is(':checked')) {
$( 'button[type="submit"]' ).prop("disabled", false);
} else {
 $( 'button[type="submit"]' ).prop("disabled", true);
}
});

<div class="custom-control custom-switch mt-2">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Подтвердить</label>
</div>

<button class="btn btn-outline-warning m2-3" type="submit" data-style="zoom-in"><span class="ladda-label">Отправить</span></button>

Написано более трёх лет назад

Stacy None @Stasy11 Автор вопроса

Павел, disabled появляется но по активации не убиирается

Написано более трёх лет назад

Павел @PavelMonro

Stacy None, вешайте на изменение же

$('input').on('change', function() {
if($('#customSwitch1').is(':checked')) {
$( 'button' ).prop("disabled", false);
} else {
 $( 'button' ).prop("disabled", true);
}
});

Написано более трёх лет назад

Nuruzov @Nuruzov

Stacy None,
Попробуй так

$(function() {
$('#customSwitch1').on('change', function(){
if($('#customSwitch1').is(':checked')) {
$( 'button[type="submit"]' ).prop("disabled", false);
} else {
 $( 'button[type="submit"]' ).prop("disabled", true);
}
});
});

Написано более трёх лет назад

Stacy None @Stasy11 Автор вопроса

Павел, воо спасибо!

Написано более трёх лет назад

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Почему шрифт в JS prompt() белого цвета?
- 1 подписчик
- 2 часа назад
- 33 просмотра
2

ответа
JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 4 часа назад
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 4 часа назад
- 123 просмотра
0

ответов
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 4 часа назад
- 46 просмотров
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- 4 часа назад
- 60 просмотров
1

ответ
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 10 часов назад
- 20 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 99 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 115 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 89 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Разработать формирование УПД на Java

20 апр. 2024, в 00:28

20000 руб./за проект

Написать программу иммитирующую поведение человека для выбора услуг

20 апр. 2024, в 00:08

10000 руб./за проект

Разработать мобильное приложение android "справочник студента"

20 апр. 2024, в 00:01

4000 руб./за проект

Answer 1 · 2019-06-19 11:37:22

$(function() {
if($('#customSwitch1').is(':checked')) {
$( 'input[type="submit"]' ).removeClass( "disabled" );
} else {
 $( 'input[type="submit"]' ).addClass( "disabled" );
}
});

Answer 2 · 2019-06-19 11:34:35

var $input = $('input'),
	$button = $('button');

$input.on('change', function() {
	if($input.is(':checked')) {
		$('button').prop('disabled', false);
	} else {
		$('button').prop('disabled', true);
	}
});

Но в данном случае меняем не свойство, а класс.

$('button').add/removeClass('disabled');

Как назначать класс в зависимости от состояния чекбокса?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт