В настоящее время я использую Bootstrap 3 и загружаю форму фильтра внутри popover. Чтобы создать эффект флажка на основе CSS, HTML нужно структурировать определенным образом (например, в примере jsfiddle)Повторяющаяся ошибка ввода ввода в popover с формами
Я собираю html из скрытого div, который содержит форму и загружает ее внутри popover. Форма учитывает функцию метки, которая позволяет проверять ввод определенного идентификатора при ссылке на метку для атрибута = "".
Но из-за popover, позволяющего создавать оригинальный html, возникает проблема с дублирующимся идентификатором. Из-за этого флажок не проверяется даже при нажатии на метку.
Любое предложение, которое вы имеете для устранения неполадок, было бы оценено. Благодаря!
$.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')
);
});
.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>
Это делает трюк. Спасибо @makshh! –