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

在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();
});

Answer 2

查看文档，似乎需要将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>

然后，确保在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

2 个答案: