Часто при разработке веб-приложений возникает необходимость проверить, отмечен ли определенный элемент типа 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, и в зависимости от этого активирует или деактивирует кнопку регистрации.
Добавить комментарий