我的表单输入字段不适用于Materialisecss

Question

我正在使用Devise gem for rails 4，我尝试在我的/registrations/edit.html.erb视图中添加一个单选按钮和一个下拉列表。接下来我使用Material Design，它似乎也禁用了这些功能

如果我禁用Material Design（我能够为我的Devise用户更新这些新字段），它可以正常工作，但是当我再次打开它时@import "materialize";中的application.scss两者都不可点击，但表格的其余部分确实有效。

所以这是我的代码。

application.scss：

//= require morris

@import "materialize";
@import "toastr";

/registrations/edit.html.erb：

<div class="row">
<div class="col s12 m6 offset-m3 center">
<h5>Edit <%= resource_name.to_s.humanize %></h5>
  <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= render partial: "shared/devisemes" %>

  <div class="input-field">
    <%= f.radio_button :sex, 1 %> <%= f.label :sex, "Female" %>
    <%= f.radio_button :sex, 2 %> <%= f.label :sex, "Male" %>
  </div>

  <br/>
  <div class="input-field">
  <%= f.label :country_code, "Default Config" %>
  <%= f.country_select :country_code %>
  </div>

  <div class="input-field">
    <%= f.text_field :name, autofocus: true, :class => "validate", :placeholder => "Name" %>
  </div>

  <div class="input-field">
    <%= f.email_field :email, :class => "validate", :placeholder => "Email" %>
  </div>

    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
      <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
    <% end %>

  <div class="input-field">
    <%= f.password_field :password, :id => "password", :placeholder => "New password (leave blank if you don't want to change it)", :class => "validate", autocomplete: "off" %>
  </div>

  <div class="input-field">
    <%= f.password_field :password_confirmation, :id => "password_confirmation", :placeholder => "Confirm password", :class => "validate", autocomplete: "off" %>
  </div>

  <div class="input-field">
    <%= f.password_field :current_password, :id => "current_password", :placeholder => "Type current password to confirm your change", :class => "validate", autocomplete: "off" %>
  </div>

  <button class="btn waves-effect waves-light" type="submit" name="action">Update</button>
  <%= link_to "Back", :back, :class => "btn waves-effect waves-light" %>
<% end %>

<br/>
<p>Unhappy?</p>
<%= link_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, :class => "btn waves-effect waves-light" %>

上述代码中没有使用的项目是:sex和:country_code。

以下是我的浏览器中的内容（名称和国家/地区重叠以及性别/性别和国家/地区选择根本没有反应）：

任何人都可以帮助我吗？

Answer 1

部分问题在于您实际上并不想在单选按钮或选择字段上使用类input-field。来自documentation：

  

“文本字段允许用户输入。边框应该简单明了地指示用户当前正在编辑的字段。您必须有一个.input-field div包装您的输入和标签。这有助于我们的jQuery为标签设置动画。这仅用于我们的Input和Textarea表单元素。“

对于选择功能，文档说将它包装在.input-field中（与上面的引用相矛盾，哎呀！）。它似乎在没有包装类的情况下为我工作。您需要确保做的事情是：

$(document).ready(function() { $('select').material_select(); });

这在选择字段文档部分的最底部提到。希望有所帮助！