Open Popup (Bootstrap) by clicking on the checkbox

Asked

Viewed 433 times

5

I have a table, where the user selects the months that have already been performed the checks. To perform this check, just mark a checkbox. However, I have a new demand, that when the user clicks on checkbox, a screen appears for the same, for the user to enter the date of the check. I looked at some forums, and I came to the conclusion that using the Popover (Bootstrap) achieves what I desire.

Implement an example of usage. However, when selecting checkbox, he brings the same popover for all the checkbox. I would like a way that each checkbox possessed his popover.

And besides, in this example the popover disappears when clicking on it. I need it to stay on the screen, for the user to select the date.

$(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&#226;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&#226;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>

For the fans, follow this example in Jsfiddle.

twitter-bootstrap popover

1 answer

1


Good afternoon, @Randrade !

One solution would be for you to have one input[type="hidden"] related to each input[type="checkbox"] and work with the events that Popover offers.

In this case, the moment you select a input[type="checkbox"], the event show.bs. will be triggered and you can store the reference between the inputs and fill in the date. When closing the Pover, the event Hide.bs. will be fired and you can copy to the input[type="hidden"] the value of the field which was informed the date.

Browser other questions tagged twitter-bootstrap popover

You are not signed in. Login or sign up in order to post.