simple_form:禁用表单,不添加禁用:true或readonly:对每个输入为true

Kel*_*nan 5 html forms ruby-on-rails disabled-input simple-form

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

我的问题是: 如何使用simple_form帮助器/包装器快速禁用每个表单输入

Simple Form的文档说明了如何disabled: true用于禁用单个输入字段

<%= simple_form_for @user do |f| %>
  <%= f.input :username, disabled: true %>
  <%= f.button :submit %>
<% end %>
Run Code Online (Sandbox Code Playgroud)

但是关于如何通过simple_form帮助器禁用整个表单而不需要disabled: true字面上重复每个表单输入的文档尚不清楚

我尝试传递disabled: truereadonly: truesimple_form的:wrapper_mappings选项,但这是行不通的。


示例代码:

我通过局部加载表单来定义simple_form显示变量。这有效:

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

但是,除非将它们传递给每个表单输入,否则readonly_stateDisabled_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 %>
Run Code Online (Sandbox Code Playgroud)

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

如何使用DRY代码在整个表单中快速切换禁用只读表单属性?

kas*_*ite 6

只是一个建议,您可以通过设置表单类的$('.form input').prop('disabled', true);位置form来使用 jquery 实现该行为。


def*_*ite 6

您可以创建一个自定义包装器来禁用输入,如下所示:

# config/initializers/simple_form.rb
config.wrappers :disabled_form do |b|
  b.use :input, disabled: true, readonly: true
end
Run Code Online (Sandbox Code Playgroud)

并以以下形式使用:

<%= simple_form_for @model, wrapper: :disabled_form %>
  <%= f.input :field %>
  ...
<% end %>
Run Code Online (Sandbox Code Playgroud)

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


Vas*_*nov 5

滑稽:

<%= f.input :username, disabled: true %>
Run Code Online (Sandbox Code Playgroud)

为元素生成了“禁用”类。

<%= f.input :username, input_html: {disabled: true} %>
Run Code Online (Sandbox Code Playgroud)

不要这样做:)

但是您可以执行以下操作:

<%= f.input :username, input_html: {readonly: :true} %>
Run Code Online (Sandbox Code Playgroud)

要么

<%= f.input :username, input_html: {disabled: :true} %>
Run Code Online (Sandbox Code Playgroud)

光标更改为(与只读不同)