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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Верстка. Быстрый старт

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

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (1)