Від автора: вітаю вас, друзі. З цієї невеликої статті ви дізнаєтеся, як в jQuery перевірити, відзначений чи checkbox форми. Це досить корисна річ, оскільки часто, в залежності від того, чи був відзначений чекбокс, програма повинна працювати з того чи іншого сценарію.
Вихідні файли поточної статті ви можете завантажити за посиланням.
Отже, перед нами стоїть завдання перевірити checkbox засобами jQuery. Наприклад, ми хочемо реалізувати наступний функціонал. У нас є кнопка відправки форми, яка спочатку не активна. І, якщо користувач зазначив checkbox, ми повинні активувати кнопку. Давайте спробуємо. Для початку створимо простеньку форму:
Для того, щоб форма виглядала красиво і при цьому не довелося писати стилі, я використовую 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);
}
});
});
Спробуємо відзначити чекбокс:
Все працює. Кнопка активується при позначці чекбокса і знову блокується при знятті позначки. Як бачимо, перевірити поле checkbox засобами jQuery — дійсно просте завдання. Ну а на цьому поточну статтю ми завершуємо. Додатково по роботі з формами ви можете подивитися цей урок. Удачі!
