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

我的应用程序中有两个角色：admin和user，它们将在下拉列表中显示。我的要求是，复选框字段应该是默认隐藏的，当我选择角色为＆＃34; user＆＃34;时，必须显示此复选框。

请帮帮我。

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

Answer 2

将一个类添加到Role like的选择框中，

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

在主要的复选框中添加一个类，然后更改为

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

添加javascript代码，

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

Answer 3

从标记（或至少某些类名称）判断，我假设你使用bootstrap，我是对的吗？所以你可以利用现有的东西，比如hidden类。如果没有，您可以随时在css中定义它：

.hidden {
  display: none;
}

我知道生成的select有id employee_role_id，所以可以这样做。这是@ rick解决方案的略微调整版本。

将类选择器添加到复选框包装div。 checkboxes标识包装器，hidden最初隐藏它。

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

然后是一些脚本：

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

我发现使用类来指示是否隐藏某些内容会更好。它更容易执行，例如，自动化测试。

但是，如果您想避免使用这个额外的hidden课程，您当然可以直接在标记中使用display: none;，例如@rick发布。脚本看起来像这样：

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

根据另一个输入下拉字段选择启用输入字段

3 个答案: