Как сделать чекбокс для активации кнопки или другого элемента? jQuery

Как сделать чекбокс для активации кнопки или другого элемента? Вы, наверное, уже сталкивались много раз с примером работы подобных скриптов - каждый раз при регистрации. Пользователю предлагается нажать на чекбокс для подтверждения прочтения пользовательского и иных соглашений. Получается, что пока юзер не нажал на checkbox, кнопка Зарегистрироваться и тп не активируется.

Предлагаю решение с использованием jQuery. Ниже сам код.

Код JS (jQuery)

$(document).ready(function(){

  $('#continue').prop('disabled', true);

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

      $('#continue').prop('disabled', function(i, val) {
        return !val;
      })
  });
})

Идентификатор agree прописываем чекбоксу, а continue для самой кнопки. Останется код самой формы и подключаемых скриптов (библиотека jQuery и выше описанный скрипт).

В итоге код будет следующего вида:

Код HTML, JS

<form>
    <h3>Текст пользовательского соглашения</h3>
    <p>1. Мы ни за что ответственности не несём.</p>
    <p>2. Вы несёте. За нарушение правил, законов.</p>
    <p>3. Мы оставляем за собой право решить спор так, как хотим мы)</p>
   <p><input type="checkbox" name="checkme" id="agree" /> Я прочитал(а) и согласен.</p>
   <input type="submit" id="continue" value="Продолжим" />
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  $('#continue').prop('disabled', true);

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

      $('#continue').prop('disabled', function(i, val) {
        return !val;
      })
  });
})
</script>

Демонстрация Скачать исходники


Надеюсь статья полезна!)