0

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

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

我想将这些转换为切换，因为此时可以检查“主持人”和“管理员”，这显然会导致错误。

表单元素

 <div class="controls">
   <%= f.check_box :admin %>Administrator
   <%= f.check_box :moderator %>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>

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

如果单击其中一个按钮，我该如何让轨道注册？

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

谢谢！

4

2 回答 2

0

能够使用以下配置来解决这个问题。

JS

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

输出

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

CSS

  .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;
}
于 2013-07-31T19:45:25.513 回答
0

尝试使用单选按钮，以便用户可以升级为管理员或版主。

<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>
于 2013-07-26T03:26:53.603 回答