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

Question

[Stacy None]

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

<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" в зависимости от состояния чекбокса?

Answer 1

[Павел]

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

Comments

[Stacy None]

Супер! А как быть если это не css класс будет а атрибут к примеру:

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

[Павел]

Stacy None,

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

[Stacy None]

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

[Павел]

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

[Stacy None]

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

$(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]

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

[Павел]

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

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

[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]

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

Answer 2

[Антон Усачев]

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');