チェックボックスのON/OFFでボタンを押せるようにする

2018年9月28日2018年10月17日

フォームのsubmitボタンをよくある「規約に同意しました。」のチェックしたら押せるようにするプログラム

inputはdisabledをJSでつけたり外したりすれば対応できそう。
attrで判別するのかとおもったけど、propを使うみたい。

あとはCSSで:disabledの判別でアクティブ非アクティブわかるようにしたらそれっぽくなるかな。

サンプルコード

js

$(function(){
var submit = $('input[type="submit"]');
submit.prop('disabled', true);
$('input[name="dataprivacy"]').on("click",function(){
    if ($(this).prop('checked')) {
        submit.prop('disabled', false);
    }else{
        submit.prop('disabled', true);
    }
})
})

css

input[type="submit"] {
  color : #000;
  pointer-events : auto;
  cursor: pointer;
}
input[type="submit"]:disabled {
  color : #999;
  pointer-events : none;
}

html

<form action="#">
  <input id="dataprivacy" type="checkbox" name="dataprivacy">
  <label for="dataprivacy">
    <a href="#" target="_blank">プライバシーポリシー </a> に同意します
  </label>
  <input type="submit" value="送信" >
</form>