Как в jQuery проверить checkbox

Дата публикации: 2016-09-12

От автора: приветствую вас, друзья. Из этой небольшой статьи вы узнаете, как в jQuery проверить, отмечен ли checkbox формы. Это достаточно полезная вещь, поскольку часто, в зависимости от того, был ли отмечен чекбокс, программа должна работать по тому или иному сценарию.

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, перед нами стоит задача проверить checkbox средствами jQuery. К примеру, мы хотим реализовать следующий функционал. У нас есть кнопка отправки формы, которая изначально не активна. И, если пользователь отметил checkbox, мы должны активировать кнопку. Давайте попробуем. Для начала создадим простенькую форму:

<form class="form-horizontal" id="recall">
	<div class="form-group">
		<label for="name" class="col-sm-2 control-label">Имя</label>
		<div class="col-sm-8">
			<input type="text" class="form-control" id="name" name="name" placeholder="Имя">
		</div>
	</div>
	<div class="form-group">
		<label for="phone" class="col-sm-2 control-label">Телефон</label>
		<div class="col-sm-8">
			<input type="text" class="form-control" id="phone" name="phone" placeholder="Телефон">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox" id="agree"> Вы согласны с условиями?
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-8">
			<button type="submit" id="submit" class="btn btn-primary" disabled>Отправить</button>
			<div></div>
		</div>
	</div>
</form>

</div>

<label for="phone" class="col-sm-2 control-label">Телефон</label>

</div>

<label>

<input type="checkbox" id="agree"> Вы согласны с условиями?

</label>

</div>

<button type="submit" id="submit" class="btn btn-primary" disabled>Отправить</button>

</div>

</form>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Для того, чтобы форма выглядела красиво и при этом не пришлось писать стили, я использую CSS фреймворк Bootstrap. В итоге получилась вот такая симпатичная форма. При этом, благодаря атрибуту disabled, кнопка не активна.

Ну что же, осталось лишь реализовать функционал, который разблокирует кнопку при отметке чекбокса и вновь заблокирует ее, если отметку снять. С jQuery это пустяковая задача, которая решается буквально несколькими строками кода.

Для решения задачи воспользуемся методом prop() со значением checked, который вернет true или false в зависимости от того, отмечен checkbox или нет. Код будет таким:

$(function(){
	$('#agree').on('change', function(){
		if($('#agree').prop('checked')){
			$('#submit').attr('disabled', false);
		}else{
			$('#submit').attr('disabled', true);
		}
	});
});

$(function(){

$('#agree').on('change', function(){

if($('#agree').prop('checked')){

$('#submit').attr('disabled', false);

}else{

$('#submit').attr('disabled', true);

}

});

Попробуем отметить чекбокс:

Все работает. Кнопка активируется при отметке чекбокса и вновь блокируется при снятии отметки. Как видим, проверить поле checkbox средствами jQuery — действительно простая задача. Ну а на этом текущую статью мы завершаем. Дополнительно по работе с формами вы можете посмотреть этот урок. Удачи!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее