3

Bom dia Guys,

Tenho um dropdown onde tenho vários checkbox contido nele. Porem quando clico em qualquer checkbox o dropdown seleciona apenas ele e fecha, queria manter o dropdown aberto até terminar minhas escolhas.

Isso seria possivel ? Se sim, como pode ser feito?

Dropdown:

$('#userList').append(
                '<div class="custom-control custom-checkbox ml-2">'+
                    '<input type="checkbox" class="custom-control-input" id="'+data[i].id+'">'+
                    '<label class="custom-control-label" for="'+data[i].id+'">'+data[i].nome+' '+data[i].sobrenome+'</label>'+
                '</div>'
                );

Div do Dropdown:

<div  class='col-xs-12 col-sm-4 col-md-4 col-lg-2 dropdown'>
                    <button class="btn btn-info botao" type='button' id="user" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-users"></i></button>
                    <div class="dropdown-menu" aria-labelledby="user" id="userList">

                    </div>
                </div> 

2 Respostas 2

5

$(document).on('click', '#userList', function (e) {
    e.stopPropagation();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">

<div class="row no-gutters">
    <div class='col-xs-12 col-sm-4 col-md-4 col-lg-2 dropdown'>
        <button class="btn btn-info botao" type='button' id="user" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-users"></i></button>
        <div class="dropdown-menu px-4 py-3" aria-labelledby="user" id="userList">
            <div class="form-group">
                <div class="row">
                    <div class="col-12">
                        <label class="custom-control custom-checkbox mb-0">
                            <input type="checkbox" class="custom-control-input">
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Opção 1</span>
                        </label>
                    </div>
                    <div class="col-12">
                        <label class="custom-control custom-checkbox mb-0">
                            <input type="checkbox" class="custom-control-input">
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Opção 2</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

13
-1

O #userList é um select?

Se lhe deres o parametro multiple, it works ;)

exemplo

<select multiple >
  <option value="" disabled selected>Choose your country</option>
  <option value="1">USA</option>
  <option value="2">Germany</option>
  <option value="3">France</option>
  <option value="4">Poland</option>
  <option value="5">Japan</option>
</select>

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .