jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法

割と頻繁に使うので備忘録。
jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。
特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。

チェックボックスにチェックされたら送信可能にするボタン

ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。
それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。

実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。

<input type="checkbox" id="check" /><label for="check"><a href="#" target="_blank">利用規約</a>に同意します</label>
<input type="submit" id="submit" value="Submit" />

$(function() {
  $('#submit').prop('disabled', true);

  $('#check').on('click', function() {
    if ( $(this).prop('checked') == false ) {
      $('#submit').prop('disabled', true);
    } else {
      $('#submit').prop('disabled', false);
    }
  });
});

サンプルコードはinput type="checkbox"には#checkを、input type="submit"には#submitをそれぞれ指定しているので、変更したい場合はそれぞれ該当の箇所を変更してください。
また、イメージのようにdisabled指定されている際に見栄えを変えたいというときは、CSSで#submit[disabled]のようにセレクタを記述すれば任意でスタイル指定もできます。

文字が入力されたら送信可能にするボタン

こちらも先ほどと同様でページが表示された際はボタンにdisabledが指定されて送信できない状態になっており、ボタン横にあるテキストフィールド内に文字が入力されたらボタンに指定してあるdisabledを解除して送信可能な状態になるというものです。
メールアドレスのバリデータとかと組み合わせて、簡易的なメルマガ登録フォームみたいなもので使用しているのをたまに見かけたりします。

実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。

<input type="text" id="text" />
<input type="submit" id="submit" value="Submit" />

$(function() {
  if ($('#text').val().length == 0) {
    $('#submit').prop('disabled', true);
  }
  $('#text').on('keydown keyup keypress change', function() {
    if ( $(this).val().length > 0 ) {
      $('#submit').prop('disabled', false);
    } else {
      $('#submit').prop('disabled', true);
    }
  });
});

チェックボックスと同様、サンプルコードではinput type="text"には#textを、input type="submit"には#submitをそれぞれ指定しているので、変更したい場合はそれぞれ該当の箇所を変更し、disabled指定の有無でスタイルを変更したい場合も同じくCSSで#submit[disabled]のようにセレクタを記述すれば任意で指定できます。