Rails 7结合MaterializeCSS时复选框渲染为隐藏输入的问题

• 首先明确：Rails的check_box helper本来就会同时生成两个元素——一个值为0的隐藏input，和一个值为1的checkbox。你只看到隐藏input，大概率是MaterializeCSS的初始化没做好，导致checkbox没被正确渲染/显示。

• 解决步骤：

  1. 确认MaterializeCSS JS已正确引入
     Rails 7默认用importmap，确保你已经在config/importmap.rb里添加了materialize的JS：

     pin "materialize", to: "https://ga.jspm.io/npm:materialize-css@1.0.0/dist/js/materialize.min.js"
     

     然后在app/javascript/application.js里导入：

     import "materialize"
     

  2. 初始化Materialize表单元素
     Materialize需要对表单元素进行初始化才能正常渲染，在页面JS里添加初始化代码：

     document.addEventListener('DOMContentLoaded', function() {
       var elems = document.querySelectorAll('input[type="checkbox"]');
       M.FormSelect.init(elems);
     });
     

     如果用Turbo，还要监听Turbo的加载事件（Turbo导航不会触发DOMContentLoaded）：

     document.addEventListener('turbo:load', function() {
       var elems = document.querySelectorAll('input[type="checkbox"]');
       M.FormSelect.init(elems);
     });
     

  3. 规范ERB代码写法
     Materialize需要label和checkbox关联才能正确显示样式，不要漏掉label：

     <%= form.check_box :active %>
     <%= form.label :active, "激活状态" %>
     

  4. 适配Turbo动态加载
     如果页面是通过Turbo流动态加载的，要确保初始化逻辑覆盖动态内容，可以把初始化逻辑封装成函数，在turbo:load和turbo:render事件里都调用。

补充：如果是collection_select的问题，同样需要用M.FormSelect.init初始化对应的select元素——Materialize会替换原生select为自定义样式的元素，不初始化就无法正常显示。

内容的提问来源于stack exchange，提问作者cbrulak