Possuo uma tabela, onde o usuário seleciona os meses que já foram realizadas as checagens. Para realizar essa checagem, basta o usuário marcar um checkbox
. Porém, tenho uma nova demanda, que quando o usuário clicar no checkbox
, aparece uma tela para o mesmo, para o usuário digitar a data da checagem.
Eu analisei alguns fóruns, e cheguei a conclusão que utilizar o Popover (Bootstrap) realiza o que desejo.
Implemente um exemplo da utilização. Porém, ao selecionar o checkbox
, ele traz o mesmo popover
para todos os checkbox
. Gostaria de uma forma de que cada checkbox
possuísse o seu popover
.
E além disso, neste exemplo o popover
desaparece ao clicar no mesmo. Eu necessito que o mesmo fique na tela, para o usuário selecionar a data.
$(function () {
// create a single access point for your popover
var $pop = $("#CheckBoxPopover");
$('.checkBoxTips input').click(function (e) {
setPopover(this);
e.stopPropagation();
});
$(document).click(function () {
$pop.hide();
});
function setPopover(element) {
setPopoverPosition(element);
if ($(element).is(":checked")) {
var title = $(element).attr("title");
$pop.find("h3.popover-title").text(title);
$pop.show();
} else {
var $checkedBoxes = $('.checkBoxTips input:checked')
if ($checkedBoxes.length >0) {
setPopover($checkedBoxes[0]);
} else {
$pop.hide();
}
}
}
function setPopoverPosition(element) {
var offset = $(element).offset();
$pop.css('left',offset.left + 20);
$pop.css('top',offset.top - 25);
}
});
.checkBoxTips input {
display: block;
}
#CheckBoxPopover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="checkBoxTips">
<table style="width:1149px;" id="tblPrestacao" class="cell-border table-bordered tblCompleta table-responsive">
<thead>
<tr bgcolor="#F1F1F1">
<th><p align="center">UF</p></th>
<th><p align="center">Entidade</p></th>
<th><p align="center">Tipo</p></th>
<th><p align="center">1</p></th>
<th><p align="center">2</p></th>
<th><p align="center">3</p></th>
<th><p align="center">4</p></th>
<th><p align="center">5</p></th>
<th><p align="center">6</p></th>
<th><p align="center">7</p></th>
<th><p align="center">8</th>
<th><p align="center">9</p></th>
<th><p align="center">10</p></th>
<th><p align="center">11</p></th>
<th><p align="center">12</p></th>
<th><p align="center">Responsável</p></th>
<th><p align="center">Observação</p></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10px"><font size="2"> <b>GO</b></font></td>
<td style="width: 250px">
<font size="2">
<a class="btnEditCliente" href="#" title="Editar Cliente">Câmara de Castanhal</a>
</font>
</td>
<td style="width: 10px"><font size="2"> <b>A</b></font></td>
<td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[0].Mes.bJaneiro" type="checkbox" value="true" /><input name="[0].Mes.bJaneiro" type="hidden" value="false" /></b></font></td>
<td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bFevereiro é obrigatório." name="[0].Mes.bFevereiro" type="checkbox" value="true" /><input name="[0].Mes.bFevereiro" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bMarco é obrigatório." name="[0].Mes.bMarco" type="checkbox" value="true" /><input name="[0].Mes.bMarco" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bAbril é obrigatório." name="[0].Mes.bAbril" type="checkbox" value="true" /><input name="[0].Mes.bAbril" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bMaio é obrigatório." name="[0].Mes.bMaio" type="checkbox" value="true" /><input name="[0].Mes.bMaio" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bJunho é obrigatório." name="[0].Mes.bJunho" type="checkbox" value="true" /><input name="[0].Mes.bJunho" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bJulho é obrigatório." name="[0].Mes.bJulho" type="checkbox" value="true" /><input name="[0].Mes.bJulho" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bAgosto é obrigatório." name="[0].Mes.bAgosto" type="checkbox" value="true" /><input name="[0].Mes.bAgosto" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bSetembro é obrigatório." name="[0].Mes.bSetembro" type="checkbox" value="true" /><input name="[0].Mes.bSetembro" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bOutubro é obrigatório." name="[0].Mes.bOutubro" type="checkbox" value="true" /><input name="[0].Mes.bOutubro" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bNovembro é obrigatório." name="[0].Mes.bNovembro" type="checkbox" value="true" /><input name="[0].Mes.bNovembro" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bDezembro é obrigatório." name="[0].Mes.bDezembro" type="checkbox" value="true" /><input name="[0].Mes.bDezembro" type="hidden" value="false" /></b></font></td>
<td>User 1</td>
<td>Sem Obs</td>
</tr>
<tr>
<td style="width: 10px"><font size="2"> <b>ES</b></font></td>
<td style="width: 250px">
<font size="2">
<a class="btnEditCliente" href="#" title="Editar Cliente">Câmara de Brasília</a>
</font>
</td>
<td style="width: 10px"><font size="2"> <b>A</b></font></td>
<td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[0].Mes.bJaneiro" type="checkbox" value="true" /><input name="[0].Mes.bJaneiro" type="hidden" value="false" /></b></font></td>
<td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bFevereiro é obrigatório." name="[0].Mes.bFevereiro" type="checkbox" value="true" /><input name="[0].Mes.bFevereiro" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bMarco é obrigatório." name="[0].Mes.bMarco" type="checkbox" value="true" /><input name="[0].Mes.bMarco" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bAbril é obrigatório." name="[0].Mes.bAbril" type="checkbox" value="true" /><input name="[0].Mes.bAbril" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bMaio é obrigatório." name="[0].Mes.bMaio" type="checkbox" value="true" /><input name="[0].Mes.bMaio" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bJunho é obrigatório." name="[0].Mes.bJunho" type="checkbox" value="true" /><input name="[0].Mes.bJunho" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bJulho é obrigatório." name="[0].Mes.bJulho" type="checkbox" value="true" /><input name="[0].Mes.bJulho" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bAgosto é obrigatório." name="[0].Mes.bAgosto" type="checkbox" value="true" /><input name="[0].Mes.bAgosto" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bSetembro é obrigatório." name="[0].Mes.bSetembro" type="checkbox" value="true" /><input name="[0].Mes.bSetembro" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bOutubro é obrigatório." name="[0].Mes.bOutubro" type="checkbox" value="true" /><input name="[0].Mes.bOutubro" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bNovembro é obrigatório." name="[0].Mes.bNovembro" type="checkbox" value="true" /><input name="[0].Mes.bNovembro" type="hidden" value="false" /></b></font></td>
<td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bDezembro é obrigatório." name="[0].Mes.bDezembro" type="checkbox" value="true" /><input name="[0].Mes.bDezembro" type="hidden" value="false" /></b></font></td>
<td>User 1</td>
<td>Sem Obs</td>
</tr>
</tbody>
</table>
</div>
<div id='CheckBoxPopover' class="popover fade right in" style="display: hidden;">
<div class="arrow"></div>
<h3 class="popover-title">Entre com a Data</h3>
<div class="popover-content">
<input type="date"></input>
</div>
</div>
Para os adeptos, segue esse exemplo no JSFiddle.