关联的简单表单更改 dom 输出

Question

我正在为我的网站使用一个主题，我正在尝试拥有类似的东西（主题的工作方式并不完美...）：

<div class="input-checkbox input-checkbox--switch">
  <input name="agree" type="checkbox">/</input>
  <label for="checkbox-switch"></label>
</div>
<span>Helper text for checkbox</span>

目前，我正在使用这样的简单表格

= simple_form_for current_user.shop do |f|
  = f.error_notification
  = f.association :services, collection: Service.active.order(:name), as: :check_boxes

输出为：

<div class="input-checkbox input-checkbox--switch">
  <input class="form-check-input check_boxes optional" type="checkbox" value="7" name="shop[service_ids][]" id="shop_service_ids_7">
  <label class="form-check-label collection_check_boxes" for="shop_service_ids_7">Service 1</label>
</div>

所以我需要把global wrapper后面的text label放到一个span tag中，然后把<label> tag中的text去掉。

我尝试了很多东西，但我迷失了 simple_form

的包装器、输入、构建器

Answer 1

如果您真的必须生成该标记，您可以使用 Rails 内置的 collection_checkboxes 助手来完成。

= f.collection_checkboxes :service_ids, @services, :id, :name do |b|
  = f.input :services # adds the simple form wrapper  
    = b.label ""
    = b.check_box
  span b.text

但我真的只想修复主题，因为这会造成巨大的可访问性问题，因为屏幕阅读器将无法阅读标签，您将无法在验收测试中使用 Capybara 定位标签文本对于可能是简单的 CSS 或 JS 问题，这感觉像是一个荒谬的解决方案。

参见Wrapping Rails Form Helpers。

Answer 2

灵感来自 Max 的回答：

= f.collection_check_boxes :service_ids, @services, :id, :name do |b|
  .input-checkbox.input-checkbox--switch
    = b.check_box
    = label_tag b, '', { for: "shop_service_ids_#{b.value}" }
   %span= b.text

关联的简单表单更改 dom 输出

Simple form change dom output for association

ruby-on-rails

simple-form