none
Checklistbox com bootstrap RRS feed

  • Pergunta

  • Preciso criar um checklistbox, utilizando o bootstrap. Tentei de várias formas e não consegui. Procurei no site do bootstrap e os exemplos de lá, não cosegui também fazer aqui em meu projeto. Eu preciso de mais ou menos isso aí em baixo:

    segunda-feira, 25 de agosto de 2014 12:05

Todas as Respostas

  • Resolvi assim:

    Html:

     <h3 class="text-center">Unidade de negócio</h3>
                <div class="well" style="max-height: 300px;overflow: auto;">
                    <ul class="list-group checked-list-box">
                        <li class="list-group-item" data-style="button">DERMA RX / ONCO</li>
                        <li class="list-group-item" data-style="button" data-color="success">DERMOCOSMÉTICOS</li>
                        <li class="list-group-item" data-style="button" data-color="info">GENÉRICOS</li>
                        <li class="list-group-item" data-style="button" data-color="warning">EXPORTAÇÃO</li>
                        <li class="list-group-item" data-style="button" data-color="danger">MIP</li>
                        <li class="list-group-item" data-style="button">PRESCRIÇÃO</li>
                    </ul>
                </div>

    CSS:

    .state-icon {
        left: -5px;
    }
    .list-group-item-primary {
        color: rgb(255, 255, 255);
        background-color: rgb(66, 139, 202);
    }

    /* DEMO ONLY - REMOVES UNWANTED MARGIN */
    .well .list-group {
        margin-bottom: 0px;
    }

    JS

    $(function () {
        $('.list-group.checked-list-box .list-group-item').each(function () {
            
            // Settings
            var $widget = $(this),
                $checkbox = $('<input type="checkbox" class="hidden" />'),
                color = ($widget.data('color') ? $widget.data('color') : "primary"),
                style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
                settings = {
                    on: {
                        icon: 'glyphicon glyphicon-check'
                    },
                    off: {
                        icon: 'glyphicon glyphicon-unchecked'
                    }
                };
                
            $widget.css('cursor', 'pointer')
            $widget.append($checkbox);

            // Event Handlers
            $widget.on('click', function () {
                $checkbox.prop('checked', !$checkbox.is(':checked'));
                $checkbox.triggerHandler('change');
                updateDisplay();
            });
            $checkbox.on('change', function () {
                updateDisplay();
            });
              

            // Actions
            function updateDisplay() {
                var isChecked = $checkbox.is(':checked');

                // Set the button's state
                $widget.data('state', (isChecked) ? "on" : "off");

                // Set the button's icon
                $widget.find('.state-icon')
                    .removeClass()
                    .addClass('state-icon ' + settings[$widget.data('state')].icon);

                // Update the button's color
                if (isChecked) {
                    $widget.addClass(style + color + ' active');
                } else {
                    $widget.removeClass(style + color + ' active');
                }
            }

            // Initialization
            function init() {
                
                if ($widget.data('checked') == true) {
                    $checkbox.prop('checked', !$checkbox.is(':checked'));
                }
                
                updateDisplay();

                // Inject the icon if applicable
                if ($widget.find('.state-icon').length == 0) {
                    $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
                }
            }
            init();
        });
        
        $('#get-checked-data').on('click', function(event) {
            event.preventDefault(); 
            var checkedItems = {}, counter = 0;
            $("#check-list-box li.active").each(function(idx, li) {
                checkedItems[counter] = $(li).text();
                counter++;
            });
            $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
        });
    });

    segunda-feira, 25 de agosto de 2014 13:15