🐍

チェックボックスをチェックしていない場合、保存できなくする方法

2023/08/26に公開

JavaScript

Rails

tech

はじめに

投稿機能にチェックボックスをつけて、チェックをつけた投稿だけ投稿できるようにしたのですが、何も入力していない場合に保存されてしまうのを以下の方法で解消しました。

disabledとは

disabledは「無効」を示すHTMLの属性です。
disabled属性は、「フォーム要素」と呼ばれるHTML要素に対して指定できます。
フォーム要素の代表的な例は、以下の通りです。
input / select / textarea / button
例えば、以下のように、何かの操作ができる要素に対し、操作をできなくするために使います。
input要素にdisabled属性を指定すると、そのinput要素に入力ができなくなる
button要素にdisabled属性を指定すると、そのbutton要素を押せなくなる
今回はチェックボックスにチェックが1つも入っていないときにボタンが押せなくなるようにしました。

実装

登録ボタンとチェックボックスに対してクラスをつけます。
登録ボタン->class: 'training-submit'
チェックボックス->class: 'checkbox'

<div class="text-center my-4">
    <%= form.submit '選択した項目を登録', class: 'training-submit btn btn-success' %>
</div>
<%= form.fields_for :post_records do |f| %>
  <div class="card d-inline-flex ml-5 ml-md-3">
    <div class="card-header">
      <%= f.check_box :availability, class: 'checkbox top10 registration-checkbox' %>
    </div>

対応するjsファイルに全てのチェックボックスが空の場合とどれか一つでもチェックがついている場合で条件分岐させる記述をします。

application.js

$(document).on('turbolinks:load', function() {
$(function() {
  if ($('.checkbox:checked').length > 0) {
      $('.training-submit').prop('disabled', false);
    } else {
      // 全てのチェックボックスが空の場合
      $('.training-submit').prop('disabled', true);
    }
  $('.checkbox').on('change', function() {
    // どれか一つでもチェックがついていれば
    if ($('.checkbox:checked').length > 0) {
      $('.training-submit').prop('disabled', false);
    } else {
      // 全てのチェックボックスが空の場合
      $('.training-submit').prop('disabled', true);
    }
  });
});
});

これでチェックボックスに1つもチェックがされていない場合、ボタンが押せないようにできます。
しかし、これだけだとデベロッパーでdisableの記述を消せばボタンが押せてしまうのでrails側でもif文を使ってボタンを押せなくします。
このような考え方をフロントエンドとバックエンドで考えるというらしいです。

以下のような記述ですべてのチェックボックスにチェックが入っていないときに、登録ボタン場合登録画面に遷移するという設定ができます。

checkbox_null_count = 0
checkbox_null_count = checkbox_null_count + 1 unless post_record.availability
        if checkbox_null_count == 6
          redirect_to request.referer
        end

スペースと改行の設定 white-space

プロパティ white-space はホワイトスペース（半角スペース、タブ、改行文字）の扱いと改行の方法を設定します。
複数のホワイトスペースが連続している時に1つにまとめるかどうか。
ソース内の改行文字を表示に反映するかどうか。
表示領域の横幅に合わせて自動改行するかどうか。

HTML:<p>*******</p>

css:p{
    width: 350px;
    border: solid 1px #ccc;
    white-space: normal;
　　}

このようにwhite-space: normal;を記述することによって、いい具合に改行をすることができました！
他にも種類が多くあり、少しづつ表示方法が違うのでそちらも確認するといいかもしれないです。

参考にさせていただいた記事

まとめ

ユーザビリティーを高めようと思うとあれもこれもとやりたくなるけど、なかなか実装方法がわからず足踏みすることが多くなっていまいました。
また、javascriptの理解が足りないので、メンターさんを頼ることが多いのでポートフォリオがひと段落したタイミングで一気に復習しようと思います。

はじめに

disabledとは

実装

スペースと改行の設定 white-space

参考にさせていただいた記事

まとめ

Discussion