1

Estou com o seguinte problema, tenho no meu formulário várias questões que são tratadas utilizando o botão rádio, conforme print em anexo. Estou utilizando jquery para alterar a cor do botão quando ele é selecionado, o problema é que quando a pessoa seleciona o tipo da solicitação e vai na linha de baixo para selecionar o prazo de serviço, a linha de cima que ela tinha selecionado perde a seleção, e não gostaria que isso acontecesse, como corrigir isso? Uma solução em javascrip também me atenderia.

HTML

<div class="row form-group">
                <div class="col-md-8">
                    <div class="btn" data-toggle="buttons">
                        <label class="btn btn-info">
                            <input type="radio" name="motSolic" id="motNovaFuncao" value=3 autocomplete=off> Nova Função
                        </label>
                        <label class="btn btn-info">
                            <input type="radio" name="motSolic" id="motRemanejamento" value=4 autocomplete=off> Remanejamento
                        </label>
                        <label class="btn btn-info">
                            <input type="radio" name="motSolic" id="motAumentoQuadro" value=5 autocomplete=off> Aumento de Quadro
                        </label>
                        <label class="btn btn-info">
                            <input type="radio" name="motSolic" id="motSubstituicao" value=6 autocomplete=off> Substituição de Colaborador
                        </label>                    
                    </div> 

                  </div>   
            </div>

            <div class="row form-group">
                <div class="col-md-4">
                    <label>Prazo do Serviço:</label>
                </div>
            </div>

            <div class="row form-group">
                <div class="col-md-4">
                    <div class="btn" data-toggle="buttons">
                        <label class="btn btn-info">
                            <input type="radio" name="prazoServico" id="motTemporario" value=7 autocomplete=off> Temporário
                        </label>
                        <label class="btn btn-info">
                            <input type="radio" name="prazoServico" id="motIndeterminado" value=8 autocomplete=off> Indeterminado
                        </label>                                                                                                                
                    </div> 
                </div>
            </div>

JQUERY

<script>
    $(document).ready(function(){
        $('#identAbertura').change(function(){
            $('.btn').removeClass().addClass('btn').addClass('btn-default');
            $(this).parent().removeClass("btn-default").addClass("btn-success");
        });
        $('#identMov').change(function(){
            $('.btn').removeClass().addClass('btn').addClass('btn-default');
            $(this).parent().removeClass("btn-default").addClass("btn-success");
        });
    });
</script>

PRINT

2
  • O name="" do seu input radio entende que faz parte do mesmo grupo de input quando está setado com o mesmo valor, no seu caso todos os inputs possuem name="motSolic", se cada um receber um name diferente, isso não acontecerá quando clicar em outro, pois seu código compreenderá que ele não faz parte do mesmo grupo de input com name="" diferente, porém, se você deseja manter duas opções de input radio, você deve manter dois valores iguais para name="", mas fazendo isso, o selecionado recebe foco e o que perde foco também perderá o seu estilo de folha css padrão.
    – ElvisP
    Commented 8/01/2018 às 15:00
  • Eliseu, editei o código html da minha pergunta, se vc reparar, o name="", estão diferentes, isso eu tinha modificado e mesmo assim continuo tendo problemas. Commented 8/01/2018 às 15:04

3 Respostas 3

2

Edit: Depois do comentário ficou mais claro o que vc queria. Segue o código.

OBS: Tente não usar nome de classes default do Bootstrap em outros lugares, como colocar a class="btn" em uma Div

OBS2: Outra coisa. Não Retire a classe BTN do botão, trabalhe apenas com as classe de estilização como btn-primary btn-default btn-danger etc...

Eu usei esse script

<script>
    $('.container').on('click', '.btn', function() {
      $(this).addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-default');
    });
</script>

Veja o resultado, acho que é isso que vc queria.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
  
</style>
</head>
<body>
  
    <div class="row form-group">
        <div class="col-md-8">
            <div class="container" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="motSolic" id="motNovaFuncao" value=3 autocomplete=off> Nova Função
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="motSolic" id="motRemanejamento" value=4 autocomplete=off> Remanejamento
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="motSolic" id="motAumentoQuadro" value=5 autocomplete=off> Aumento de Quadro
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="motSolic" id="motSubstituicao" value=6 autocomplete=off> Substituição de Colaborador
                </label>                    
            </div> 
        </div>   
    </div>

    <div id="tile-sort" class="row form-group">
        <div class="col-md-8">
            <div class="container" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="motSolic" id="sort-goodbye" value=3 autocomplete=off> Temporário
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="motSolic" id="motIndeterminado" value=4 autocomplete=off> Indeterminado
                </label>                 
            </div> 
        </div>   
    </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    $('.container').on('click', '.btn', function() {
      $(this).addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-default');
    });
</script>

</body>
</html>

4
  • Hugo, boa tarde, gostaria de mudar a cor de default para 'btn-info' sem prejudicar o que já foi selecionado, como faço isso? Commented 8/01/2018 às 15:08
  • @MarcilioEloi agora que entendi melhor o que vc queria. O Bootstrap tem alguma particularidades com hierarquia de classe, da uma olha no código que vc vai entender melhor.
    – hugocsl
    Commented 8/01/2018 às 15:28
  • Funcionou Hugo, muito obrigado pela atenção. Commented 8/01/2018 às 16:47
  • @MarcilioEloi que bom que deu certo, tmj!
    – hugocsl
    Commented 8/01/2018 às 16:52
1

JQuery

   $('input:radio').bind('click', function() {
        $(this).toggleClass('red');
         //.....seu código
    });

CSS

 input{
        background:#FFFFEE;
    }
    .red{
        background-color:red;
    }

Fontes: https://stackoverflow.com/questions/5397911/jquery-background-color-change-on-focus-and-blur

https://api.jquery.com/checked-selector/

1

Olá!

Não sei se entendi muito bem o que precisa, mas costumo mudar a aparência do radio com a propriedade checked do css mesmo. Subi um exemplo no codepen se quiser dar uma olhada: https://codepen.io/juunegreiros/pen/eyyVEV

HTML

<input type="radio" name="exemplo" id="ex1" value="1">
<label for="ex1"></label>

<input type="radio" name="exemplo" id="ex2" value="2">
<label for="ex2"></label>

CSS

input{
  display: none
}
label{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: gray;
  opacity: .8;
}
input:checked + label{
  background-color: red;
  opacity: 1;
}
2
  • Boa tarde Juliana, gostaria de mudar a cor do botão de 'btn-default' para 'btn-info' sem prejudicar o que já foi selecionado em outra parte do meu formulário. Commented 8/01/2018 às 15:15
  • Boa tarde! O problema que vi é que o seu script tira as classes de todos os btn, inclusive dos que estão ativos em outros lugares. Acredito que especificar pelo input resolva! $("input[type='radio']:not(:checked)").parent().removeClass().addClass('btn').addClass('btn-default'); Commented 8/01/2018 às 15:43

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 .