1

Eu tenho a seguinte lista de checkboxes:

Lista de checkboxes

Estou usando Bootstrap 4 e Angular 7. Gostaria de saber uma maneira de que quando a checkbox for clicada, a linha dela mude de cor, assim fica mais fácil do usuário saber se está clicando nas permissões certas (Leitura, Impressão, Exclusão e Gravação).

EDIT: Código do HTML

<div id="test-l-4" class="content">
          <div class="form-group">
            <label for="funcionalidade">Funcionalidades</label>
            <div class="row">
              <div class="col">
                <div class="form-check " *ngFor="let f of funcionalidades; let x = index">
                  <input class="form-check-input" type="checkbox" id="{{ f.id_funcionalidade }}">{{ f.id_funcionalidade }} - {{ f.nome_funcionalidade }}
                  <div class="form-check form-check-inline float-right" *ngFor="let op of operacoes; let i = index">
                    <input class="form-check-input" type="checkbox" id="checkinfo_{{x}}_{{i}}" >{{op.operacao}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button (click)="back()" class="btn btn-primary mr-3">Back</button>
          <button (click)="next()" class="btn btn-primary">Next</button>
        </div>
3

1 Resposta 1

1

Como havia comentado, vc pode usar a pseudo classe :checked e o seletor + para pegar a div irmã direta do checkbox e colocar uma cor de background nela

Basicamente vc vai precisar dessa regra CSS

.form-check-input:checked + div {
    background-color: red;
}

inserir a descrição da imagem aqui

Segue o código da imagem acima

.form-check-input:checked + div {
    background-color: red;
}
<link rel="stylesheet" type="text/css" media="screen"    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />

<div id="test-l-4" class="content">
    <div class="form-group">
        <label for="funcionalidade">Funcionalidades</label>
        <div class="row">
            <div class="col">
                <div class="form-check " *ngFor="let f of funcionalidades; let x = index">
                    <input class="form-check-input" type="checkbox"
                        id="{{ f.id_funcionalidade }}">{{ f.id_funcionalidade }} - {{ f.nome_funcionalidade }}
                    <div class="form-check form-check-inline float-right"
                        *ngFor="let op of operacoes; let i = index">
                        <input class="form-check-input" type="checkbox" id="checkinfo_{{x}}_{{i}}">{{op.operacao}}
                    </div>
                </div>
                <div class="form-check " *ngFor="let f of funcionalidades; let x = index">
                    <input class="form-check-input" type="checkbox"
                        id="{{ f.id_funcionalidade }}">{{ f.id_funcionalidade }} - {{ f.nome_funcionalidade }}
                    <div class="form-check form-check-inline float-right"
                        *ngFor="let op of operacoes; let i = index">
                        <input class="form-check-input" type="checkbox" id="checkinfo_{{x}}_{{i}}">{{op.operacao}}
                    </div>
                </div>
                <div class="form-check " *ngFor="let f of funcionalidades; let x = index">
                    <input class="form-check-input" type="checkbox"
                        id="{{ f.id_funcionalidade }}">{{ f.id_funcionalidade }} - {{ f.nome_funcionalidade }}
                    <div class="form-check form-check-inline float-right"
                        *ngFor="let op of operacoes; let i = index">
                        <input class="form-check-input" type="checkbox" id="checkinfo_{{x}}_{{i}}">{{op.operacao}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button (click)="back()" class="btn btn-primary mr-3">Back</button>
    <button (click)="next()" class="btn btn-primary">Next</button>
</div>

3
  • Muito obrigado pela ajuda @hugocsl, funcionou como eu pedi! Vlw! 17/04/2019 às 12:28
  • @EdwardRamos sem problemas meu caro, tem coisas simples que da para fazer com CSS que vc nem acredita que não tem script envolvido rss. []´s
    – hugocsl
    17/04/2019 às 12:29
  • 1
    É verdade. Com esse código, até fiz um "hover", e ficou bom também. 18/04/2019 às 19:23

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 .