Question

仍在学习Bootstrap，我正在尝试使用复选框创建一个输入表单，在选中任何复选框时会出现一个下拉列表（对于该特定复选框）。我遇到的问题是，每当出现下拉菜单时，它会移动其他复选框。我想阻止它，以便复选框固定到位，并且在下拉时不会移动。

以下是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属性来隐藏选择框。此属性将隐藏元素，但它将在页面上具有空间。有关更多说明：http://www.w3schools.com/cssref/pr_class_visibility.asp

因此，对于上面的代码，您可以执行以下更改：

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：

$(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。只要您可以在每行上放置一个复选框和下拉列表，这就可以工作。然后确保你的col类匹配。所以在这个例子中我正在使用.col-xs-4

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

HTML：

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

复选框格式化的Bootstrap Dynamic下拉列表

2 个答案: