Question

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

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

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

表单元素

 <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>

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

 <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>

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

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

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

谢谢！

Answer 1

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

<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>

Answer 2

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

<强> 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;
}

Bootstrap复选框到单选按钮组转换布尔值

2 个答案: