simple_form：禁用表单而不添加disabled：true或readonly：对每个输入都为true

Question

我有一个大的 simple_form 表单，其中的字段需要启用或禁用，具体取决于表单的部分加载位置。

我的问题是：你如何使用simple_form helpers / wrappers快速禁用每个表单输入？

Simple Form's documentation解释了disabled: true如何用于禁用单个输入字段：

<%= simple_form_for @user do |f| %>
  <%= f.input :username, disabled: true %>
  <%= f.button :submit %>
<% end %>

但是文档不太清楚如何通过simple_form帮助程序禁用整个表单，而无需在每个表单输入的上重复disabled: true。 < / p>

我尝试将disabled: true和readonly: true传递给simple_form的:wrapper_mappings选项，但这不起作用。

---

示例代码：

我通过partial加载表单来定义simple_form显示变量。这有效：

#user/show.html.erb:
<%= render partial: 'shared/form', locals: {questionnaire: @questionnaire, readonly_state: true, disabled_state: true, bootstrap_form_class: 'form-horizontal'} %>

但是， readonly_state 和 disabled_state 不起作用，除非我将它们传递给每个表单输入：

# shared/_form.html.erb
<%= simple_form_for(@questionnaire, :html => {:class => bootstrap_form_class}, 

:wrapper_mappings => {check_boxes: :vertical_radio_and_checkboxes, file: :vertical_file_input,
boolean: :vertical_boolean  }) do |f| %>

  <%= f.input :username, disabled: disabled_state, hint: 'You cannot change your username.' %>
  <%= f.input :email, disabled: disabled_state %>
  <%= f.input :city, disabled: disabled_state %>
  <%= f.input :country, disabled: disabled_state %>
  . . .
  <%= f.button :submit %>
<% end %>

---

您可以快速查看大型表单的重复性。

如何使用DRY代码在整个表单中快速切换禁用和 readonly 表单属性？

Answer 1

您可以创建一个自定义包装器来禁用这样的输入：

# config/initializers/simple_form.rb
config.wrappers :disabled_form do |b|
  b.use :input, disabled: true, readonly: true
end

在表格中使用：

<%= simple_form_for @model, wrapper: :disabled_form %>
  <%= f.input :field %>
  ...
<% end %>

根据表单中不同输入的数量，您可能需要创建更多自定义包装并在禁用的表单中使用wrapper_mapping。

Answer 2

只是一个建议，您可以通过设置$('.form input').prop('disabled', true); form来表示使用jquery的行为。{/ 1}}是您的表单类。

Answer 3

滑稽：

<%= f.input :username, disabled: true %>

为元素生成'禁用'类。

<%= f.input :username, input_html: {disabled: true} %>

不要这样做：）

但你可以这样做：

<%= f.input :username, input_html: {readonly: :true} %>

或

<%= f.input :username, input_html: {disabled: :true} %>

其中（与readonly不同）光标变为?

Answer 4

您可以使用CSS模仿Disabled属性。 只需创建该类并有条件地添加它即可。

.disable {
  background: #f2f2f2;
  pointer-events:none;
}