かずおの開発ブログ(主にRuby)

日々の開発のことを色々書きます。

チェックボックスやラジオボタンの値に応じてフォームの活性非活性を切り替える

Railsでフォームの開発をしていて、チェックボックスラジオボタンの値によってフォームの活性/非活性を切り替えたいなってことがよくあります。 その度に実装方法を思い出して、実装するっていうのは時間の無駄+馬鹿らしいのである程度汎用的なメソッドにしてしまうことにしました。 で作ったのがこちら。checkboxの値が定数なのでわざわざ引数にする必要がなかったり、複数のフォームに対応していなかったりまだ不十分なところはありますが、とりあえずこれをv0.1として適宜改修していこうと思います。

sample.html.slim(要 layoutファイル)

= check_box_tag 'checkbox', true, false, {}

= text_field_tag 'text_field'
= radio_button_tag 'gender', 'male'
| 男
= radio_button_tag 'gender', 'female', style: "display=block"
| 女

set_activate_connection.js.coffee

$ ->
  # checkboxのとき
  setActivateConnection("#checkbox", "true", undefined, "#text_field", "")
  # radiobuttonのとき
  setActivateConnection("input[name='gender']", "male", "female", "#text_field", "foo")
  return

setActivateConnection = (triggerSelector, activeValue, disabledValue, targetSelector, targetInitialVal) ->
  $(triggerSelector).on 'change', ->
    switch this.type
      when "checkbox"
        checkedVal = $(triggerSelector + ":checked").val()
        if checkedVal is activeValue
          $(targetSelector).removeAttr('disabled')
        else if checkedVal is disabledValue
          $(targetSelector).val(targetInitialVal).attr('disabled','disabled')
      when "radio"
        if this.value is activeValue
          $(targetSelector).removeAttr('disabled')
        else if this.value is disabledValue
          $(targetSelector).val(targetInitialVal).attr('disabled','disabled')
  return