自分用メモ。
check_box_tagとフォームボタンをjQueryで連動する方法
たとえば利用規約などに同意しないとサインアップできないようにしたい時、jQueryを使うと簡単にできました。
1. jquery_railsがGemfileに記載されているか確認
なければインストール(Rails3.1以降はデフォルトインストールされているのでこの作業は不要)
2. 設定を確認
/app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
/app/views/layouts/application.html
<%= javascript_include_tag "application" %>
3. viewファイルにcheck_box_tagを追加
例:
/app/views/users/new.html.erb
<%= check_box_tag :check %>
<%= label_tag :check, ("#{link_to "利用規約", "#"}に同意する").html_safe %>
4. viewファイルのフォームボタンにidを追加
例:
/app/views/users/new.html.erb
<%= f.submit "アカウントを作成する", id: "submit" %>
5. jQueryを追加
下記はcoffeeスクリプトの追加例です。
例:
/app/assets/javascripts/users.coffee
$ ->
$('#submit').attr 'disabled', 'disabled'
$('#check').click ->
if $(this).prop('checked') == false
$('#submit').attr 'disabled', 'disabled'
else
$('#submit').removeAttr 'disabled'
return
return
まとめ
viewファイル内のcheck_box_tag
の:check
とフォームボタンのid: "submit"
はjQuery内で参照しているので、この部分を変更する時はjQuery内も合わせて変更してください。
なお、この内容は
https://www.nxworld.net/tips/jquery-switch-disable-input-button.html
http://railsdoc.com/jquery
を参考にさせていただきました。