LoginSignup
2

More than 5 years have passed since last update.

check_box_tagとフォームボタンをjQueryで連動する方法

Last updated at Posted at 2017-09-28

自分用メモ。

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
を参考にさせていただきました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2