Question

我在Rails中创建一个简单的调查应用程序，显示一个问题和答案选择（只能选择一个）。我想：

将单选按钮显示为Bootstrap按钮
以垂直间距垂直显示按钮（不是没有间距的Bootstrap .btn-group）
选择按钮时突出显示

我能够将无线电显示为Bootstrap按钮并垂直显示：

buttons displaying correctly

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

misbehaving buttons

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

_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

我打算用我认为你想要的东西来回答你的问题。

首先，我认为你需要使用Bootstrap中的https://github.com/mzabriskie/react-tabs来获得你想要的行为。您可以将它们更改为JavaScript button group，但您必须手动添加覆盖样式以在它们之间放置空格。

你真的希望收音机还能显示吗？如果没有，这段代码就足够了（减去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>

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

如果有任何拼写错误我道歉 - 我正在使用现有的应用程序，其中表格是位置，而字段是距离，所以如果你看到＆＃34; location＆＃34;或者＆＃34;距离＆＃34;任何地方，只需替换＆＃34; user_response＆＃34;和＆＃34; answer_id＆＃34;

Answer 2

这可能对你有所帮助

<body>
<div class='answer-body form-group' >
    <input type="radio"  value="5" name="user_response[answer_id]" id="user_response_answer_id_5" />
    <label class="btn btn-primary" data-toggle="button" id="btn1" onclick="func(this.previousSibling.previousSibling.id, this.id)" for="user_response_answer_id_5">Arf! Love them.</label>
</div>

<div class='answer-body form-group' >
    <input type="radio" value="6" name="user_response[answer_id]" id="user_response_answer_id_6" />
    <label class="btn btn-primary" data-toggle="button" id="btn2" onclick="func(this.previousSibling.previousSibling.id, this.id)" for="user_response_answer_id_6">They&#39;re okay</label>
</div>

<div class='answer-body form-group' >
    <input type="radio" value="7" name="user_response[answer_id]" id="user_response_answer_id_7" />
    <label class="btn btn-primary" data-toggle="button" id="btn3" onclick="func(this.previousSibling.previousSibling.id, this.id)" for="user_response_answer_id_7">Bah humbug</label>
</div>
<script>
     function func(sender, obj)
    {

      document.getElementById(sender).checked=true;
      document.getElementById(obj).style.background='#5cb85c';

    }
    </script>
  </body>

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

2 个答案: