javascript - 启用基于另一个输入下拉字段选择的输入字段

Question

我的表格如下:

<%= 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 %>

我的应用程序中有 2 个 Angular 色:管理员和用户，它们将在下拉列表中可见。 我的要求是，复选框字段应默认隐藏，当我选择 Angular 色为“用户”时，此复选框必须可见。

请帮助我。

Answer 1

将类添加到复选框的主 div 中，如下所示:

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

将其添加到您的 java 脚本文件或 html 文件中，它可能会起作用:

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