チェックボックスのON/OFFでボタンを押せるようにする
フォームの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>
ディスカッション
コメント一覧
まだ、コメントがありません