ブートストラップチェックボックスの書式設定で動的ドロップダウン

Question

まだブートストラップを学習していて、チェックボックスを使用して入力フォームを作成しようとしています（その特定のチェックボックスのチェックボックスを選択するとドロップダウンが表示されます）。私が実行している問題は、ドロップダウンが表示されるたびに、他のチェックボックスを移動させることです。私はそれがチェックボックスと場所に固定され、ドロップダウンが表示されたときにシフトしないようにそれを防止したいと思います。ここで

は、HTMLスニペットです：ここで

<div class="container-fixed"> 
    <div class="row"> 

     <div class="form-check col-xs-6" > 
     <label class="form-check-label"> 
     <input type="checkbox" value="cheese" >cheese 
     <div class="form-group"id="cheese"> 
      <label for="Quantity">How Much?</label> 
       <select class="form-control" > 
        <option>regular</option> 
        <option>Extra</option> 
       </select> 
     </div> 
     </label> 
     </div> 

     <div class="form-check col-xs-6" > 
     <label class="form-check-label"> 
     <input type="checkbox" value="Broccoli" >Broccoli 
     <div class="form-group"id="Broccoli"> 
      <label for="Quantity">How Much?</label> 
       <select class="form-control" > 
        <option>regular</option> 
        <option>Extra</option> 
       </select> 
     </div> 
     </label> 
     </div> 

     <div class="form-check col-xs-6" > 
     <label class="form-check-label"> 
     <input type="checkbox" value="Peppers" >Peppers 
     <div class="form-group"id="Peppers"> 
      <label for="Quantity">How Much?</label> 
       <select class="form-control" > 
        <option>regular</option> 
        <option>Extra</option> 
       </select> 
     </div> 
     </label> 
     </div> 

はjQueryのです：

$(document).ready(function() { 
    $("input").click(function() { 
      var show = "#" + this.value 
      $(show).show(); 
    }) 
}) 

Answer 1

あなたが選択ボックスを非表示にするvisibility:hidden CSSプロパティを使用する必要があります。このプロパティは要素を非表示にしますが、ページ上にスペースがあります。以上の説明のための ：

HTML：：

<div class = "container-fixed"> 
    <div class = "row"> 
     <div class = "form-check col-xs-6" > 
      <label class = "form-check-label"> 
       <input type = "checkbox" value = "cheese" >cheese 
       <div class = "form-group select-box" id = "cheese"> 
        <label for = "Quantity">How Much?</label> 
        <select class = "form-control" > 
         <option>regular</option> 
         <option>Extra</option> 
        </select> 
       </div> 
      </label> 
     </div> 

     <div class = "form-check col-xs-6" > 
      <label class = "form-check-label"> 
       <input type = "checkbox" value = "Broccoli" >Broccoli 
       <div class = "form-group select-box" id = "Broccoli"> 
        <label for = "Quantity">How Much?</label> 
        <select class = "form-control" > 
         <option>regular</option> 
         <option>Extra</option> 
        </select> 
       </div> 
      </label> 
     </div> 

     <div class = "form-check col-xs-6" > 
      <label class = "form-check-label"> 
       <input type = "checkbox" value = "Peppers" >Peppers 
       <div class = "form-group select-box" id = "Peppers"> 
        <label for = "Quantity">How Much?</label> 
        <select class = "form-control" > 
         <option>regular</option> 
         <option>Extra</option> 
        </select> 
       </div> 
      </label> 
     </div> 

CSS：

.select-box{ 
    visibility: hidden; 
} 

jQueryのhttp://www.w3schools.com/cssref/pr_class_visibility.asp

は、したがって、上記のコードのためにあなたは、このような変更を行うことができます：

$(document).ready(function() { 
    $("input[type='checkbox']").click(function() { 
     var show = this.value 
     if ($(this).prop('checked')){ 
      $("#"+show).css('visibility', 'visible'); 
     }else{ 
      $("#"+show).css('visibility', 'hidden'); 
     } 
    }) 
}) 

JSFIDDLE：https://jsfiddle.net/8d1fnb5z/

Answer 2

私は新しい.rowチェックボックスの現在の行の下に追加することになります。これは、チェックボックスとドロップダウンをそれぞれ1行に収めることができる限り機能します。次に、あなたのcolクラスが一致することを確認します。

<div class="container-fixed"> 
    <div class="row"> 

    <div class="form-check col-xs-4"> 
     <label class="form-check-label"> 
     <input type="checkbox" value="cheese" >cheese 
     </label> 
    </div> 
    <div class="form-check col-xs-4"> 
     <label class="form-check-label"> 
     <input type="checkbox" value="Broccoli" >Broccoli 
     </label> 
    </div> 
    <div class="form-check col-xs-4"> 
     <label class="form-check-label"> 
     <input type="checkbox" value="Peppers" >Peppers 
     </label> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-4"> 
     <div class="form-group hide" id="cheese"> 
     <label for="Quantity">How Much?</label> 
     <select class="form-control"> 
      <option>regular</option> 
      <option>Extra</option> 
     </select> 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="form-group hide" id="Broccoli"> 
     <label for="Quantity">How Much?</label> 
     <select class="form-control"> 
      <option>regular</option> 
      <option>Extra</option> 
     </select> 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="form-group hide" id="Peppers"> 
     <label for="Quantity">How Much?</label> 
     <select class="form-control"> 
      <option>regular</option> 
      <option>Extra</option> 
     </select> 
     </div> 
    </div> 
    </div> 

JAVASCRIPT：

$("input").change(function() { 
    var chk = "#" + this.value; 
    if ($(this).is(':checked')) { 
    $(chk).removeClass('hide'); 
    } else { 
    $(chk).addClass('hide'); 
    } 
}); 

この例では、私は .col-xs-4

http://codepen.io/partypete25/pen/VmgPVp

HTMLを使用していますので、