Как проверить, отмечен ли checkbox в jQuery?

Часто при разработке веб-приложений возникает необходимость проверить, отмечен ли определенный элемент типа checkbox, и в зависимости от этого выполнять определенные действия.

Например, на странице регистрации нового пользователя есть галочка «Я согласен с условиями использования». До тех пор, пока пользователь не поставит галочку, кнопка «Зарегистрироваться» остается неактивной.

Вот пример такого кода на jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="agreeTerms"/>
<button id="registerButton" disabled>Зарегистрироваться</button>

if ($('#agreeTerms').attr('checked')) {
  $("#registerButton").prop('disabled', false);
} else {
  $("#registerButton").prop('disabled', true);
}

Но вот незадача: этот код всегда возвращает false, даже если галочка поставлена. Почему так происходит и как это исправить?

Проблема в том, что метод .attr() в jQuery возвращает значение атрибута элемента таким, каким оно было в момент загрузки страницы. В нашем случае, атрибут checked отсутствовал в момент загрузки страницы, поэтому .attr('checked') возвращает undefined, что эквивалентно false.

Для того, чтобы проверить текущее состояние checkbox (отмечен он или нет), необходимо использовать метод .prop(). В отличие от .attr(), метод .prop() возвращает текущее значение свойства элемента, которое может меняться в процессе взаимодействия пользователя со страницей.

Исправленный код будет выглядеть так:

if ($('#agreeTerms').prop('checked')) {
  $("#registerButton").prop('disabled', false);
} else {
  $("#registerButton").prop('disabled', true);
}

Теперь код корректно определяет, отмечен ли checkbox, и в зависимости от этого активирует или деактивирует кнопку регистрации.