样式复选框 rails

Question

我正在尝试在我的 rails 应用中设置复选框样式。

<div class="form-group">
     <%= f.label :tag_list %>
   <p>Science</p>
  <%= f.check_box :tag_list, { :multiple => true }, 'science', nil %>

  <p>Math</p>
  <%= f.check_box :tag_list, { :multiple => true }, 'math', nil %>

  </div>

在我的application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/button
//= require jquery-ui/datepicker
//= require jquery-ui/slider
//= require jquery-ui/spinner
//= require jquery-ui/tooltip
//= require jquery-ui/effect
//= require flatuipro
//= require flat-ui.min
//= require sweet-alert-confirm
//= require turbolinks
//= require_tree .

$(':checkbox').radiocheck();

我正在使用一些东西 called flat-ui 并尝试应用它们为复选框提供的样式。 我该怎么做？

Answer 1

您需要 radiocheck js 文件：

您可以下载js文件：radiocheck.js

在 app/assets/javascripts 文件夹中包含 radiocheck.js 文件。

在您的 application.js 中添加这一行，文件将如下所示：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require flat-ui.min
//= require radiocheck
//= require_tree .

$(function(){
    $(':checkbox').radiocheck();
});

Answer 2

查看文档，似乎 class checkbox 需要给 label，input 需要在 [= 内14=]。您的标记将如下所示：

<div class="form-group">
  <%= f.label :tag_list, class: 'checkbox' do %>
    <p>Science</p>
    <%= f.check_box :tag_list, { multiple: true }, 'science', nil %>
  <% end %>
</div>

然后，确保您在 JavaScript 中调用 $(':checkbox').radiocheck();，并且您已经包含 Flat-UI js 文件。

更新自chat：

确保每个 input 都有自己的 label:

<div class="form-group">
  <%= f.label :tag_list, class: 'checkbox' do %>
    <p>Science</p>
    <%= f.check_box :tag_list, { multiple: true }, 'science', nil %>
  <% end %>

  <%= f.label :tag_list, class: 'checkbox' do %>
    <p>Math</p>
    <%= f.check_box :tag_list, { multiple: true }, 'math', nil %>
  <% end %>

  ...
</div>

还要确保 JavaScript 在页面加载完成之前不会被调用：

// application.js
$(function() {
  $(':checkbox').radiocheck();
});

样式复选框 rails

Styling checkboxes rails

ruby

ruby-on-rails

simple-form