Styling checkboxes rails - ruby-on-rails

Question

I'm trying to style checkboxes in my rails app.
<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>
In my 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();
I'm using something called flat-ui and am trying to apply the styles they provide for check boxes. How do I do this?

Answer 1

Looking at the documentation, it seems like the class checkbox needs to be given to the label, and the input needs to be inside the label. Your markup would then look something like this:
<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>
Then, make sure you are calling $(':checkbox').radiocheck(); in your JavaScript, and that you have included the Flat-UI js file.
Update from chat:
Make sure that each input has its own 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>
Also make sure that the JavaScript isn't called until the page has finished loading:
// application.js
$(function() {
$(':checkbox').radiocheck();
});

Answer 2

You need the radiocheck js file:
You can download the js file: radiocheck.js
Include radiocheck.js file in app/assets/javascripts folder.
Add this line in your application.js and the file will look like this:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require flat-ui.min
//= require radiocheck
//= require_tree .
$(function(){
$(':checkbox').radiocheck();
});