样式复选框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();

我正在使用一些称为平面用户界面，并试图应用它们为复选框提供的样式。我该怎么做？

Answer 1

查看文档，似乎需要将类checkbox分配给label，而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 %>
</div>

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

从 聊天更新

确保每个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();
});

Answer 2

你需要无线电检查的js文件：

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

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

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

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

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