carrierwaveで削除チェックボックスが表示されない

Question

###前提・実現したいこと

rails5.0.1でcarrirwaveを利用して画像のアップロードと削除機能を実装したいです。
simple_formも利用しています。

###発生している問題・エラーメッセージ
エラーメッセージは表示されていません。
アップロードはできましたが、削除がうまくできないです。
画像を削除するかどうかのチェックボックスボックスが表示される想定ですが、
そのチェックボックスが表示されません。

###該当のソースコード
画像を格納しているカラムは、userモデルのmain_imageになります。
1つの画像のみを扱うことを想定しています。

<%= simple_form_for @user, url: profile_path, method: :patch do |f| %>
        <label class="form-small__item">プロフィール画像</label>
        <p><%= f.file_field :main_image , label: 'プロフィール画像' %></p>
        <label>
        <%= f.check_box :remove_main_image, label: 'プロフィール画像を削除' %>プロフィール画像を削除
        <%= f.input :remove_main_image, as: :boolean %>プロフィール画像を削除
        </label>
        <%= f.input :person_name, autofocus: true, label: 'お名前' %>
・・・

        <%= f.submit 'Submit' %>
<% end %>

###試したこと
上記5,6行目のように2パターンを試しました。
チェックボックスが表示されることなく、プロフィール画像という文言のみ表示されます。

###補足情報(言語/FW/ツール等のバージョンなど)

Comments

[gesorein]

質問文に「チェックボックスが表示されることなく、プロフィール画像という文言のみ表示されます」と書かれていますが、「プロフィール画像を削除」のテキストや「お名前」のテキストフィールドは表示されていますか？

[Cojiro]

ご質問ありがとうございます。失礼しました。「チェックボックスが表示されることなく、プロフィール画像という文言のみ表示されます」ではなく、「チェックボックスが表示されることなく、プロフィール画像を削除という文言のみ表示されます」になります。ですので、質問の回答につきましては、「プロフィール画像を削除」のテキストや「お名前」のテキストフィールドは表示されています。

Answer 1

質問と同じ View のコードで試してみましたが、私の環境では正常にチェックボックスが表示されました。
f.check_box と f.input 両方ともチェックボックスの表示が確認できました。

ここからは推測です。該当のソースコードではチェックボックスを label で囲んでいますが、
もしかしたらチェックボックスをカスタマイズするために、
デフォルトのチェックボックスの CSS を打ち消していませんか？

ブラウザでページのソースを表示し、以下のような HTML があるか確認してみてください。

<input type="checkbox" value="1" name="user[remove_main_image]" id="user_remove_main_image" />

※ 場合によっては若干 HTML が異なるかもしれません

もしこちらの HTML が存在するなら、 CSS が原因で表示されていない可能性が高いです。
その場合は CSS を修正するか適切な class を指定してみてください。
見当違いの回答なら申し訳ないです。

Comments

[Cojiro]

ありがとうございます。
ブラウザのデベロッパーツールで調査したところ、おっしゃる通り下記CSSが原因でした。
-------
/* Remove default checkbox */
/* line 15, /bundle/gems/materialize-sass-0.98.2/app/assets/stylesheets/materialize/components/forms/_checkboxes.scss */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}
-------
materialize-sassの公式ホームページより使い方を参照し、下記ソースで表示させることができました。
http://materializecss.com/forms.html

-----
<%= f.check_box :remove_main_image, label: 'Remove Image'%><label for="user_remove_main_image">Remove Image</label>
-----

削除自体も行えることを確認できました。
ありがとうございました。