如何隐藏特定文本字段，直到用户选择符合该特定字段的操作

Question

我花时间学习 Rails，现在我正在做一个演示项目。我希望用户做的第一件事是在护理请求_form 上选择他们是否需要立即护理。如果用户选择“false”，那么用户将被要求从接下来的两行隐藏代码中选择时间和日期，传入我的 start_time 和 start_date。如果用户选择“true”，当用户单击请求_form 上的提交按钮时，我想使用 Time.now 来获取我的 start_time 和 start_date 字段的当前时间和当前日期。我的问题是在用户选择“false”之前隐藏最后两个字段的正确方法是什么？ requests_form.html.erb

<div class="row">
    <div class="form-group">
     <%= f.check_box :immediate_care,{:checked => "checked"} %> Patient needs immediate care.
    </div
 </div>   

<div class="row">
   <div class="form-group">
       <label>Choose your start date.</label>
       <%= f.text_field :start_day, placeholder: "MM/DD/YY", class: "form control" %>
       </div>
 </div>

<div class="row">
   <div class="form-group">
      <label>Choose your start time.</label>
      <%= f.text_field :start_time, placeholder: "08:00 AM", class: " form-control" %>
      </div>
</div>      

Answer 1

这是一个大大简化的解决方案。基本思想是将可选显示的输入字段包装在单个 div 中。您定义了几个 CSS 类，它们将分别显示和隐藏该 div。您将 javascript 函数绑定到该 select 上的 click 事件，该事件将根据 select:option 值将 CSS 类添加和删除到可选 div。

HTML：

<select id='my_select'>Do you want Immediate Care?
  <option value='yes'>Yes</option> 
  <option value='no'>No</option>
</select>

<div class='reveal' id='date_fields'>
  ... in here you put the fields you want to hide and show ...
</div>

Javascript：

$document.ready(function() {
  $('#my_select').bind('click', function() {
    selected_option = $('#my_select option:selected');
    if $(selected_option).val() == 'yes' {
      $('#date_fields').addClass('reveal');
      $('#date_fields').removeClass('hide');
    } else {
      $('#date_fields').addClass('hide');
      $('#date_fields').removeClass('reveal');
    }
  });
});

最后，CSS：

.reveal {
  display: block;
}

.hide {
  display: none;
}

我坦率地承认，在某些地方我的语法可能不正确。作为一名 Rails 开发人员，我选择使用 Coffeescript 和 SASS，因此我的 Javascript 和 SASS 语法技能在过去 5 年中有所下降。请随时指出问题和/或编辑修复。

对此有一些警告。由于 div 默认为 display:block，您可以使用单个 CSS 类将其更改为 display:none，并让点击处理程序简单地添加和删除该类。我使我的示例更加明确，因此更容易遵循逻辑。

另外，我可能错误地绑定了点击。同样，这个例子只是为了展示我要解决的问题的一般方法。

Answer 2

为可选字段包装器添加类：

<div class="row optional">

添加此脚本：

<script>
  $('#patient_immediate_care').change(function() {
      if($(this).is(":checked")) {
        $('.optional').hide();
      }
      else {
        $('.optional').show();
      }
    }

  );
  $(function() {
      if($('#name_immediate_care').is(":checked")) {
        $('.optional').hide();
      }
      else {
        $('.optional').show();
      }
  });
</script>

还有css：

<style>
    .optional {
      display: none;
    }
</style>

检查表单元素的 ID。这取决于form_for。以病人为例。