如何在Rails中将text_field转换为Bootstrap风格的单选按钮？

<%= form_with(model: evaluation) do |form| %>
  <% if evaluation.errors.any? %>
    <div style="color: red">
      <h2><%= pluralize(evaluation.errors.count, "error") %> prohibited this evaluation from being saved:</h2>

      <ul>
        <% evaluation.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group">
    <%= form.label :name, style: "display: block" %>
    <%= form.text_field :name, class:"form-control" %>
  </div>

  <div class="form-group">
    <%= form.label :be_humbly_confident, style: "display: block" %>
    <div class="form-check">
      <%= form.radio_button :be_humbly_confident, 'yes', class: 'form-check-input', id: 'be_humbly_confident_yes' %>
      <%= form.label :be_humbly_confident_yes, 'Yes', class: 'form-check-label' %>
    </div>
    <div class="form-check">
      <%= form.radio_button :be_humbly_confident, 'no', class: 'form-check-input', id: 'be_humbly_confident_no' %>
      <%= form.label :be_humbly_confident_no, 'No', class: 'form-check-label' %>
    </div>
  </div>

  <div class="form-group">
    <%= form.label :grow_or_die, style: "display: block" %>
    <div class="form-check">
      <%= form.radio_button :grow_or_die, 'yes', class: 'form-check-input', id: 'grow_or_die_yes' %>
      <%= form.label :grow_or_die_yes, 'Yes', class: 'form-check-label' %>
    </div>
    <div class="form-check">
      <%= form.radio_button :grow_or_die, 'no', class: 'form-check-input', id: 'grow_or_die_no' %>
      <%= form.label :grow_or_die_no, 'No', class: 'form-check-label' %>
    </div>
  </div>

  <div class="form-group mt-3">
    <%= form.submit class: 'btn btn-primary' %>
  </div>
<% end %>

核心改动说明 #

• 用form.radio_button替换原有的text_field，每个目标字段对应两个单选按钮，分别绑定'yes'和'no'值
• 套入Bootstrap的form-check容器结构：给单选按钮加form-check-input类，对应标签加form-check-label类，实现Bootstrap原生单选按钮样式
• 给每个单选按钮设置唯一id，确保标签与按钮的关联逻辑正常

索引页更新示例 #

如果你的索引页之前展示文本框输入内容，直接输出字段值即可，可优化显示格式：

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Be Humbly Confident</th>
      <th>Grow Or Die</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% @evaluations.each do |evaluation| %>
      <tr>
        <td><%= evaluation.name %></td>
        <td><%= evaluation.be_humbly_confident.capitalize %></td>
        <td><%= evaluation.grow_or_die.capitalize %></td>
        <td>
          <%= link_to 'Show', evaluation %>
          <%= link_to 'Edit', edit_evaluation_path(evaluation) %>
          <%= link_to 'Destroy', evaluation, method: :delete, data: { confirm: 'Are you sure?' } %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

额外优化建议 #

在模型中添加验证规则，确保字段只能存入合法值：

# app/models/evaluation.rb
class Evaluation < ApplicationRecord
  validates :be_humbly_confident, inclusion: { in: %w(yes no) }
  validates :grow_or_die, inclusion: { in: %w(yes no) }
end

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