Enable input field based on another input drop down field selection

Question

I am having a form as:

<%= form_for(@employee , html: {class: 'form-horizontal', role: 'form' }) do |f| %>
  <div class="field">
    <%= f.label :role,"Role", :class => 'control-label' %>
    <div class="controls"></div>
    <%= f.collection_select(:role_id, Role.all, :id, :role_name, prompt: "-- Select --") %>
  </div>
  <div class="field">
    <%= f.label :is_sales_report_visible," Visible Factory Sales", :class => 'control-label' %>
    <div class="controls"></div>
    <%= f.check_box :is_sales_report_visible, {}, true, false %>
    <div class="field"></div>
    <%= f.label :is_invoice_visible," Visible Invoice Details", :class => 'control-label' %>
    <div class="controls"></div>
    <%= f.check_box :is_invoice_visible,input_html: { :class => 'check_box' } %>
  </div>
  <div class="form-actions1">
    <%= f.submit :class => 'btn btn-primary btn-md' %>
    <%= link_to "Cancel", employees_path(), :class => 'btn btn-danger', data: { confirm: 'Are you sure you want to cancel' } %>
  </div>
<% end %>

There are 2 roles: admin and user in my application which will be visible in drop down. My requirement is, the check box field should be default hidden and when I select role as "user", this check boxes has to be visible.

Please help me.

Answer 1

Add class to your main div of check boxes as:

<div class="field user_checkbox_fields" style="display:none;">

Add this to your java script file or html file, it may work:

$(document).ready(function(){
    $("#employee_role_id").click(function () {
        if($("#employee_role_id")[0].value=="User") {
            $(".user_checkbox_fields").css("display","block");           
        }
        else {
            $(".user_checkbox_fields").css("display","none");
        }
    });

Answer 2

Add one class into the select box for Role like,

<%= f.collection_select(:role_id, Role.all, :id, :role_name, prompt: "-- Select --",{:class=>'role'}) %>

Add one more class to your main div of checkboxes and change to,

<div class="field user_checkbox_fields" style="display:none;">

And add javascript code like,

$('.role').change(function() {
  if($(this).val() == "user") {
    $('.user_checkbox_fields').show();
  }
  else{
    $('.user_checkbox_fields').hide();
  }
});
$('.role').trigger('change');

Answer 3

Judging from markup (or at least some classes names), I assume you use bootstrap, am I right? So you can take benefit of existing stuff, like hidden class. If not, you can always define it in css:

.hidden {
  display: none;
}

I understand the generated select has id employee_role_id , so it could be done like this. It's a slightly adjusted version of @rick's solution.

Add classes a selector to checkbox wrapping div. checkboxes to identify the wrapper, hidden to hide it initially.

<div class="field checkboxes hidden">
// your checkboxes here...
</div>

And then some scripting:

$(document).on("change", "select[id$='role_id']", function() {
  # toggleClass applies or removes a class from DOM element
  # depending on boolean value of the second argument
  $(".checkboxes").toggleClass("hidden", $(this).val() != "user")
});

$("select[id$='role_id']").trigger("change");

I find it better to use class to indicate if something is hidden or not. It's easier to perform, for example, automated tests.

However if you'd like to avoid using this additional hidden class, you can of course go with display: none; directly in the markup, like @rick posted. With script looking like this:

$(document).on("change", "select[id$='role_id']", function() {
  # toggle shows or hides DOM element
  # depending on boolean value of the second argument
  $(".checkboxes").toggle($(this).val() != "user")
});

$("select[id$='role_id']").trigger("change");