Bootstrap Checkbox to Radio Button Group Conversion Boolean

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> 

Я смотрю на бутстраповского документ для базовой установки:

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

Оба элемента являются установки как "boolea n "в базе данных.

Как я могу получить рельсы для регистрации, если была нажата одна из кнопок?

Я уверен, что это будет нуждаться в яваскрипте крикнуть

спасибо!

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