Rails + jQueryでフォームのチェックボックスで項目の表示/非表示を制御する

はじめに

jQueryを使って、フォーム上に配置したチェックボックスで、フォーム上の項目（メソッド）の表示、非表示の切り替えを行えるようにする。

環境

• Vagrant + Ubuntu 16.04.5 LTS
• Rails 5.2.4.2
• slim
• jQuery
• Bootstrap4

やり方

Viewに、このように記述する。
チェックボックス、ラジオボタンの類は、form-groupでも囲んでもエラーにはならないが、基本、checkboxで囲む。横並びにしたい場合はrowを付ける。

index.html.slim

.checkbox.row
        .col-sm-2
            = f.label :motouke, '区分', class: 'control-label'
        .col-sm-1
            = f.label :motouke, '自治体', class: 'control-label'
            = f.radio_button :motouke, 1, checked: true, id: 'motouke_kbn_1'
        .col-sm-1
            = f.label :motouke, '民間', class: 'control-label'
            = f.radio_button :motouke, 2, id: 'motouke_kbn_2'

セレクト項目で空白選択を許す場合は、**{include_blank: true}**をつけます。

index.html.slim

.form-group.row
    .col-sm-2
        = f.label '都道府県', class: 'control-label'
    .col-sm-8
        = f.select 'j', options_for_select(['北海道','青森県','岩手県','宮城県','秋田県','山形県','福島県']), 
            		{include_blank: true}, 
                     class: 'selectpicker form-control', id: 'task_idx_j_sel'
    .col-sm-2
        = link_to '自治体検索', class: 'btn btn-outline-primary', id: 'task_idx_j_lnk'

jsファイルを作って、このように記述する。ラジオボタンが押されたイベントは、changeで拾う。項目を非表示にする場合は、prop('disabled', false)、表示にする場合は、**prop('disabled', true)**となる。**fadeIn()**にすると、フェードインのように、徐々に表れてくる。また、**fadeOut()にすると、フェードアウトのように、徐々に消えていくようになる。少し見栄えをお洒落にしたい場合は使える。
因みに、$("#task_idx_j_sel").attr('readonly', true);**を採用すると、項目が灰色にはなるが、カーソル移動できてしまうため、これはちと使えません。あしからず。

app/javascripts/taskas_index.js

// 団体で自治体が選択された時
$(function() {
    $('input[id="motouke_kbn_1"]').change(function() {

        //選択したvalue値を変数に格納
        var val = $(this).val();
        if (val == 1) {
            // 入力可にする
            $("#task_idx_j_sel").prop('disabled', false);
            $("#task_idx_j_lnk").fadeIn();
        }
    });
});

見た目の動きはこんな感じ。自治体にチェックを付けると、セレクト項目が入力可で、ボタンも押下可です。

app/javascripts/taskas_index.js

// 団体で民間が選択された時
$(function(){
    $('input[id="motouke_kbn_2"]').change(function() {

        var val = $(this).val();
        if (val == 2) {
            // 入力不可にする
            $("#task_idx_j_sel").prop('disabled', true);
            $("#task_idx_j_lnk").fadeOut();
        }
    })
})

見た目の動きはこんな感じ。民間にチェックを付けると、セレクト項目が入力不可になり、ボタンが非表示になります。