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>

両方のアイテムは、データベースで「ブール値」として設定されます。

ボタンの 1 つがクリックされた場合にレールを登録するにはどうすればよいですか?

これには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 に答える