Javascript 引导复选框到单选按钮组转换布尔值

我已经阅读了很多关于如何使用引导单选按钮组替换标准复选框的教程和帖子。不幸的是，我发现没有一个真正适合我的情况

创建用户后，我可以选择是否需要升级为“管理员”或“版主”。默认情况下，所有用户都是“基本用户”，除非单击复选框将用户升级为“版主”或“管理员”

我想把它们转换成一个开关，因为在这个时候，“版主”和“管理员”都可以被检查，这显然会导致错误

表单元素

 <div class="controls">
   <%= f.check_box :admin %>Administrator
   <%= f.check_box :moderator %>Moderator
 </div>

  <div class="radio-style">
    <%= f.check_box :admin %><%= f.label :admin %>
    <%= f.check_box :moderator %><%= f.label :moderator %>
  </div>

管理员
调解人

HTML输出：

<div class="controls">
  <input type="hidden" value="0" name="user[admin]">
    <input id="user_admin" type="checkbox" value="1" name="user[admin]">
        Administrator
  <input type="hidden" value="0" name="user[moderator]">
     <input id="user_moderator" type="checkbox" value="1" name="user[moderator]">
        Moderator
</div>

管理员
调解人

我正在查看基本设置的引导文档：

 <div class="btn-group" data-toggle="buttons-radio">
   <button type="button" class="btn btn-primary" value="1" name="user[admin]" id="user_admin">Administrator</button>

 <button type="button" class="btn btn-primary" value="1" name="user[moderator]" id="user_moderator">Moderator</button>
</div>

管理员
调解人

这两个项目在数据库中都设置为“布尔值”

如果单击了其中一个按钮，如何让rails注册

我很确定这需要一个javascript调用

---

谢谢

尝试使用单选按钮，以便用户可以升级为be和admin或版主

<form >
<p><input name="group1" id="r1" type="radio"  /><label for="r1">admin</label></p>
<p><input name="group1" id="r2" type="radio"  /><label for="r2">moderator</label></p>
</form>

管理员

主持人

能够使用下面的配置来解决这个问题

JS

  $('.radio-style input:checkbox').click(function() {
$(this).siblings('input:checkbox').removeAttr('checked');
 });

  .radio-style input[type=checkbox] {
    display:none;
}

  .radio-style input[type=checkbox] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

 .radio-style input[type=checkbox]:checked + label{
       background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        background-color:#e0e0e0;
}   

输出

 <div class="controls">
   <%= f.check_box :admin %>Administrator
   <%= f.check_box :moderator %>Moderator
 </div>

  <div class="radio-style">
    <%= f.check_box :admin %><%= f.label :admin %>
    <%= f.check_box :moderator %><%= f.label :moderator %>
  </div>

---

我试图保持风格统一，实现引导布局。如果我转换成简单的单选按钮，那么我就失去了我想要达到的目标，或者我错过了整个twitter部分，对它不熟悉。是否可以用管理员取代版主。。。如果两者都被点击，角色就是管理员。我可以通过搜索网页时找到的一个来源来找到它。我会张贴链接，如果我可以重新定位它