Notice: Trying to access array offset on value of type bool in /home/himariweb/www/wp/wp-content/themes/luxeritas/inc/json-ld.php on line 114

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

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>