javascript - 如何将单选按钮显示为在 Rails 中改变颜色的 Bootstrap 按钮？

Question

我正在 Rails 中创建一个简单的调查应用程序，它显示一个问题和答案以供选择(只能选择一个)。我愿意:

• 将单选按钮显示为 Bootstrap 按钮
• 以一定的垂直间距垂直显示按钮(不是没有间距的 Bootstrap .btn-group)
• 选中按钮时突出显示

我能够将 radio 显示为 Bootstrap 按钮并垂直显示:

Bootstrap 提供 data-toggle="button"切换按钮状态。但是，当我将“data-toggle: button”添加到单选输入标签时，没有任何反应。当我将它添加到单选按钮的标签标签时，使用 .btn.active 上的 CSS 选择器来更改颜色，按钮会更改颜色但不再被选中:

如何使颜色突出显示和单选按钮正常工作？谢谢!

_form.html.erb 摘录:

  <% @question.answers.each do |a| %>
    <div class='answer-body form-group' data-toggle: "buttons">
        <%= f.radio_button :answer_id, a.id %>
        <%= f.label :answer_id, a.body, { value: a.id, class: 'btn btn-primary', "data-toggle": "button" } %>
    </div>
  <% end %>

SCSS

.btn.active {
  background-color: #5cb85c;
}

生成的 HTML

<div class='answer-body form-group' data-toggle: "buttons">
    <input type="radio" value="5" name="user_response[answer_id]" id="user_response_answer_id_5" />
    <label class="btn btn-primary" data-toggle="button" for="user_response_answer_id_5">Arf! Love them.</label>
</div>

<div class='answer-body form-group' data-toggle: "buttons">
    <input type="radio" value="6" name="user_response[answer_id]" id="user_response_answer_id_6" />
    <label class="btn btn-primary" data-toggle="button" for="user_response_answer_id_6">They&#39;re okay</label>
</div>

<div class='answer-body form-group' data-toggle: "buttons">
    <input type="radio" value="7" name="user_response[answer_id]" id="user_response_answer_id_7" />
    <label class="btn btn-primary" data-toggle="button" for="user_response_answer_id_7">Bah humbug</label>
</div>

Answer 1

我将尝试以我认为您想要的方式回答您的问题。

首先，我认为您需要使用 JavaScript button group从 Bootstrap 以获得您想要的行为。您可以将它们更改为 vertical , 但您必须手动添加覆盖样式以在它们之间放置空格。

您真的希望 radio 仍然显示吗？如果没有，此代码可能就足够了(减去 CSS 以更改事件状态的颜色并增加按钮之间的间距)

Rails html.erb

  <div class="field form-group">
    <%= f.label :answer_id %><br>
    <div class="btn-group-vertical" data-toggle="buttons">
      <%= f.label :answer_id, class: "btn btn-primary active" do %>
        <%= f.radio_button :answer_id, 5, checked: true %>
        Arf! Love them.
      <% end %>
      <%= f.label :answer_id, class: "btn btn-primary" do %>
        <%= f.radio_button :answer_id, 6 %>
        They're okay.
      <% end %>
      <%= f.label :answer_id, class: "btn btn-primary" do %>
        <%= f.radio_button :answer_id, 7 %>
        Bah humbug.
      <% end %>
    </div>
  </div>

编译后的html

  <div class="field form-group">
    <label for="user_response_answer_id">Answer</label><br>
    <div class="btn-group-vertical" data-toggle="buttons">
      <label class="btn btn-primary active" for="user_response_answer_id">
        <input type="radio" value="5" checked="checked" name="user_response[answer_id]" id="user_response_answer_id_5" />
        Arf! Love them.
</label>      <label class="btn btn-primary" for="user_response_answer_id">
        <input type="radio" value="6" name="user_response[answer_id]" id="user_response_answer_id_6" />
        They're okay.
</label>      <label class="btn btn-primary" for="user_response_answer_id">
        <input type="radio" value="7" name="user_response[answer_id]" id="user_response_answer_id_7" />
        Bah humbug.
</label>    </div>
  </div>

我没有足够的声望点来发布截图!如果您喜欢我的回答，我想我已经足够了，然后我可以编辑它以包含屏幕截图。

如果有任何拼写错误，我深表歉意 - 我使用的是一个现有的应用程序，其中表格是位置，字段是距离，所以如果您在任何地方看到“位置”或“距离”，只需替换“user_response”和“answer_id”