Rails Form Helper：通过单选按钮启用/禁用文本框求助

我来帮你搞定这个问题！你要实现的是通过单选按钮切换文本框的启用/禁用状态，结合Rails的form helper和JavaScript就能轻松实现，下面是完整的可运行方案：

ERB表单代码 #

首先是你的表单部分，我们给单选按钮统一添加class，同时根据模型初始值设置文本框的默认禁用状态：

<%= form_with(model: @your_model, local: true) do |f| %>
  <!-- 定金支付时机单选组 -->
  <div class="mb-3">
    <%= f.radio_button :deposit_due_at_booking, true, class: "deposit-timing-radio", id: "deposit_at_booking" %>
    <%= f.label :deposit_at_booking, "定金在预订时支付", class: "form-check-label" %>
    
    <%= f.radio_button :deposit_due_at_booking, false, class: "deposit-timing-radio", id: "deposit_after_days" %>
    <%= f.label :deposit_after_days, "定金在指定天数后支付", class: "form-check-label" %>
  </div>

  <!-- 需要控制的天数输入框 -->
  <div class="mb-3">
    <%= f.label :days_deposit_due, "定金到期天数", class: "form-label" %>
    <%= f.number_field :days_deposit_due, 
                        id: "days_deposit_input", 
                        class: "form-control",
                        disabled: @your_model.deposit_due_at_booking? %>
  </div>

  <%= f.submit "保存设置", class: "btn btn-primary" %>
<% end %>

JavaScript逻辑（jQuery版本） #

如果你的项目已经引入了jQuery，可以用这段代码来监听单选按钮的切换事件，动态更新文本框状态：

$(function() {
  // 页面加载时先同步一次状态
  toggleDaysInputState();

  // 监听单选按钮点击事件
  $('.deposit-timing-radio').click(toggleDaysInputState);

  // 封装状态切换逻辑
  function toggleDaysInputState() {
    // 判断是否选中"预订时支付"的选项
    const isDueAtBooking = $('#deposit_at_booking').is(':checked');
    // 设置输入框的禁用状态
    $('#days_deposit_input').prop('disabled', isDueAtBooking);
  }
});

JavaScript逻辑（原生JS版本） #

如果不想用jQuery，原生JS也能实现同样的效果：

document.addEventListener('DOMContentLoaded', function() {
  const radioButtons = document.querySelectorAll('.deposit-timing-radio');
  const daysInput = document.getElementById('days_deposit_input');

  // 初始同步状态
  updateInputState();

  // 给每个单选按钮绑定点击事件
  radioButtons.forEach(radio => {
    radio.addEventListener('click', updateInputState);
  });

  function updateInputState() {
    const selectedOption = document.querySelector('.deposit-timing-radio:checked');
    daysInput.disabled = selectedOption.value === 'true';
  }
});

关键要点说明 #

• 初始状态同步：页面加载时就根据模型的deposit_due_at_booking字段值设置文本框的禁用状态，确保刷新页面后状态正确。
• Unobtrusive JavaScript：把JS逻辑从HTML属性中分离出来，避免onclick内联代码，让代码更清晰、易维护。
• 正确使用disabled属性：用prop('disabled', ...)（jQuery）或直接设置disabled属性（原生JS）来切换状态，这是处理布尔属性的正确方式，比用attr更可靠。

内容的提问来源于stack exchange，提问作者Mike N.