ボタンを条件に応じて非活性にする

いきさつ

ボタンを非活性にする方法はいろいろあるものだなぁと思ったのでまとめておきます。

非活性の条件

今回は非活性の条件を下記のようにします。

CONDITION_DAY = 11
Date.today.day < CONDITION_DAY && hoge.blank?
#hogeは配列

今日の日付が1~10日であり、hogeに要素がない場合はボタンを非活性状態にします。

html.erb

<%# クラスはbootstrapを使用した場合のもの %>

<%= link_to 'ボタンです', {controller: :hugas, action: :piyo}, class: 'btn btn-primary btn-block', id: 'submit-btn' %>

css

bootstrapを使えばクラスに'disabled'を指定すれば非活性となりますが、
使用していない場合は次のcssを書くものとします。

a.disabled{
    pointer-events: none;
}

本題

1. JavaScriptで制御する

とっても便利なgem、gonを使用した例です。
gonはコントローラーで

#controller
gon.qiita = 'Qiitaに投稿します'

とするだけで

//js
console.log(gon.qiita)
//　=>'Qiitaに投稿します'

のようにjavascript側で変数を取得できるようになります。

クラスにdisabledを追加して非活性に

gon.conditionに真偽値をつめて・・・

#controller
gon.condition =　Date.today.day < CONDITION_DAY && hoge.blank?

trueだったらdisabledをクラスに追加
jQuery使用時の書き方してます

#js.coffee
if gon.condition == true
  $('#submit-btn').addClass 'disabled'

素のjsだとこうなる

//js
if(gon.condition === true){
  document.getElementById('submit-btn').classList.add('disabled');
};

==trueや===trueはなくてもOK。

propで要素を追加する方法

propメソッドを使用する場合はlink_toではなくbutton_toにしてあげる必要があります。
そのうえで

#js.coffee
if gon.condition
  $('#submit-btn').prop 'disabled', true

素なら

//js
if(gon.condition){
  document.getElementById('submit-btn').prop('disabled', true);
};

で要素にdisabledを追加してボタンを非活性にすることができます。

2.JavaScriptを使わない方法

タイトル通りです。
まずはコントローラーでインスタンス変数に条件の真偽値を詰めてやります。

#controller
@condition = Date.today.day < CONDITION_DAY && hoge.blank?

次にlink_toの部分を下記のように書き換えます。

<%# html.erb %>
<%= link_to 'ボタンです', {controller: :hugas, action: :piyo}, class: "btn btn-primary btn-block #{ 'disabled' if @condition } ", id: 'submit-btn' %>

@conditionがtrueなら、クラスにdisabledを追加。
また三項演算子でも書くことができます。

<%= link_to 'ボタンです', {controller: :hugas, action: :piyo}, class: "btn btn-primary btn-block #{ @condition ? 'disabled' : '' } ", id: 'submit-btn' %>

感想

JavaScriptで書くのも楽しいけど、Rails単体で制御できるのはとっても楽。
「チェックボックスにチェックした時、ボタンを非活性にする」みたいな条件でなければ後者を使っていきたい。
こんな方法もあるよ〜っていうのがあれば教えてください。