ActiveAdmin/Formtastic：如何添加与模型无关的输入复选框？

一、添加不绑定模型属性的自定义复选框 #

ActiveAdmin基于Formtastic，直接用Rails的check_box_tag生成独立于模型的复选框即可，同时包裹成Formtastic的样式，保持和表单其他元素风格统一：

ActiveAdmin.register YourAssociatedModel do
  form do |f|
    # 原有关联模型字段
    f.inputs "基础信息" do
      f.input :name
      f.input :parent_model, as: :select
    end

    # 插入自定义确认复选框
    f.inputs "提交确认" do
      div class: "input boolean optional" do # 匹配Formtastic布尔输入框样式
        label for: "confirmation_checkbox" do
          check_box_tag "confirmation_checkbox", "1", false, id: "confirmation_checkbox"
          "我已确认所有信息无误，同意提交"
        end
      end
    end

    f.actions
  end
end

• check_box_tag生成不绑定模型的独立复选框，第三个参数false表示默认未勾选
• 外层div的类名和Formtastic原生布尔输入框一致，避免样式错乱

二、实现提交验证的JavaScript逻辑 #

用ActiveAdmin默认集成的jQuery监听表单提交事件，未勾选时阻止提交并提示：

$(document).on('submit', 'form.active_admin_form', function(e) {
  const confirmCheckbox = $('#confirmation_checkbox');
  if (!confirmCheckbox.is(':checked')) {
    e.preventDefault(); // 阻止表单提交
    // 用ActiveAdmin风格的错误提示（比alert更统一）
    $('.flash').html('<div class="alert alert-error">请勾选确认框后再提交</div>');
    confirmCheckbox.focus(); // 聚焦到复选框，提升用户体验
  }
});

• 用form.active_admin_form选择器匹配所有ActiveAdmin表单，也可以用更精确的表单ID（比如#new_your_associated_model或#edit_your_associated_model）
• 替换alert为ActiveAdmin自带的flash提示，页面风格更协调

三、JavaScript代码的放置位置 #

根据需求选择以下一种方式：

1. 仅在当前模型表单页面加载（推荐） #

直接在ActiveAdmin的模型注册块中用content_for :scripts注入JS，避免全局加载冗余代码：

ActiveAdmin.register YourAssociatedModel do
  # 上面的form代码...

  content_for :scripts do
    javascript_tag do
      <<-JS
        $(document).on('submit', 'form.active_admin_form', function(e) {
          const confirmCheckbox = $('#confirmation_checkbox');
          if (!confirmCheckbox.is(':checked')) {
            e.preventDefault();
            $('.flash').html('<div class="alert alert-error">请勾选确认框后再提交</div>');
            confirmCheckbox.focus();
          }
        });
      JS
    end
  end
end

2. 全局加载（多模型复用） #

如果多个模型需要该功能，将JS写入app/assets/javascripts/active_admin.js，并添加页面判断：

$(document).ready(function() {
  // 仅在目标模型的表单页面生效（body类由ActiveAdmin自动生成）
  if ($('body').hasClass('your_associated_model')) {
    $(document).on('submit', 'form.active_admin_form', function(e) {
      const confirmCheckbox = $('#confirmation_checkbox');
      if (!confirmCheckbox.is(':checked')) {
        e.preventDefault();
        $('.flash').html('<div class="alert alert-error">请勾选确认框后再提交</div>');
        confirmCheckbox.focus();
      }
    });
  }
});

3. 独立JS文件（结构清晰） #

创建app/assets/javascripts/admin/your_associated_model.js写入JS代码，然后在active_admin.js中引入：

// app/assets/javascripts/active_admin.js
// 其他引入代码...
//= require admin/your_associated_model

内容的提问来源于stack exchange，提问作者Francesco Mari