Question

我目前正在使用Bootstrap 3并在popover中加载一个过滤器表单。为了创建基于CSS的复选框效果，HTML需要以特定方式构建（如在jsfiddle示例中）

我从包含表单的隐藏div中抓取html并将其加载到popover中。表单计入标签功能，允许在从＆＃34;＆＃34;的标签引用时检查某些id的输入。属性。

但由于popover允许原始html存在，因此存在重复的ID问题。因此，即使单击标签，也不会检查复选框。

您对此问题的任何建议都将不胜感激。谢谢！

＆＃13;

$.noConflict();

function filterToggle (title, toggle, html) {
  toggle.popover({
    html: true, 
    placement: "auto",
    content: function() {
      return html.html();
    },
    title: title+'<button type="button" id="close" class="close"></button>',
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-title"></div><div class="popover-content"></div></div>'
  });
};
jQuery(document).ready(function($) {
  filterToggle(
    'Filter Title',
    $('#popover-toggle'), 
    $('#popover-content-html')
  );
});

＆＃13;

.popover { max-width:500px; }
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { margin-left:0; }

div.checkbox label:before {
  border-radius: 4px;
}
div.checkbox input:checked + label:before {
  border-color: green;
  background: green;
  color: #fff;
  line-height: 16px;
}

div.checkbox {
  position: relative;
}
div.checkbox label {
  padding-left: 30px;
}
div.checkbox label:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  cursor: pointer;
}
div.checkbox input {
  display: block;
  float: left;
  outline: none;
  margin-left: -9999px !important;
}
div.checkbox input.hidden + label {
  padding-left: 0;
}
div.checkbox input.hidden + label:before {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="popover-content-html" class="hidden">
  <form>
    <div class="checkbox">
      <input type="checkbox" name="vehicle" value="Bike" id="checkbox-1"/>
      <label for="checkbox-1" class="control-panel">Bike</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="vehicle" value="Motorcycle" id="checkbox-2"/>
      <label for="checkbox-2" class="control-panel">Motorcycle</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="vehicle" value="Car" id="checkbox-3"/>
      <label for="checkbox-3" class="control-panel">Car</label>
    </div>
  </form>
</div>

<button class="btn btn-primary" id="popover-toggle">Click Me!</button>

＆＃13;

Answer 1

您可以在显示弹出窗口时删除表单，并从弹出窗口内容中复制此表单。隐藏弹出窗口后，您可以将复制的表单添加到前一个div，因此总有一个表单。

$.noConflict();

var form = jQuery('#popover-content-html').find('form');

function filterToggle(title, toggle, html) {
  toggle.popover({
    html: true,
    placement: "auto",
    content: function() {
      return html.html();
    },
    title: title + '<button type="button" id="close" class="close"></button>',
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-title"></div><div class="popover-content"></div></div>'
  });
};
jQuery(document).ready(function($) {
  filterToggle(
    'Filter Title',
    $('#popover-toggle'),
    $('#popover-content-html')
  );
});

jQuery('#popover-toggle').on('shown.bs.popover', function() {
  form.remove();
  form = jQuery('.popover-content').find('form');
});
jQuery('#popover-toggle').on('hidden.bs.popover', function() {
  form.prependTo('#popover-content-html');
});

.popover { max-width:500px; }
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { margin-left:0; }

div.checkbox label:before {
  border-radius: 4px;
}
div.checkbox input:checked + label:before {
  border-color: green;
  background: green;
  color: #fff;
  line-height: 16px;
}
div.checkbox {
  position: relative;
}
div.checkbox label {
  padding-left: 30px;
}
div.checkbox label:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  cursor: pointer;
}
div.checkbox input {
  display: block;
  float: left;
  outline: none;
  margin-left: -9999px !important;
}
div.checkbox input.hidden + label {
  padding-left: 0;
}
div.checkbox input.hidden + label:before {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="popover-content-html" class="hidden">
  <form>
    <div class="checkbox">
      <input type="checkbox" name="vehicle" value="Bike" id="checkbox-1"/>
      <label for="checkbox-1" class="control-panel">Bike</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="vehicle" value="Motorcycle" id="checkbox-2"/>
      <label for="checkbox-2" class="control-panel">Motorcycle</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="vehicle" value="Car" id="checkbox-3"/>
      <label for="checkbox-3" class="control-panel">Car</label>
    </div>
  </form>
</div>
<button class="btn btn-primary" id="popover-toggle">Click Me!</button>

使用表单在popover中重复输入id问题

1 个答案: