0

Boa tarde.

Problema resolvido: Realmente achei estranho dar certo aqui e cheguei a conclusão de que poderia ser o fato do grupo de checkbox(es) ser gerado dinamicamente. E era isso mesmo! A solução foi colocar change dentro da função success do Ajax, logo após os checkbox(es) serem impressos na tela. Ficou mais ou menos assim:

function getLotes(){
    var options = {
        url: "formhelper.php",
        type: "POST",
        data: {acao: 'getLotes'},
        success: function (data) {
            $('.lote-checkbox').empty().html(data));

            $('input[id^="lotebox"]').on('change', function(){
               alert('checou ou não checou');
            });
        }
    };
    $('form[name="rlManejo"]').ajaxForm(options).submit();
}

lotebox foi a última das tentativas que fiz, tentando fazer dar certo.

O comando $('form[name="rlManejo"]').ajaxForm(options).submit(); faz parte da biblioteca malsup (jQuery Form Plugin: http://jquery.malsup.com/form/#ajaxForm) que estamos usando para essa aplicação (caso alguém queira saber/entender).

Muito obrigado a todos por tentarem ajudar. No final o problema era esse.

Grande abraço!

Problema primário:

Quando marco/desmarco o checkbox, o alerta (usado só para teste) não aparece.

O label muda de cor, como programado no CSS, mas o checkbox não é dado como checked (verificado via Google Chrome/Elements). Também não há mensagem de erro no console.

Me parece igual ao que o @Victor Carnaval postou como resposta e funciona aqui no Stack, mas no meu site não. É o único elemento que está dando problema.

Código jquery/javascript:

$('form[name="rlManejo"] input[name="lote[]"]').on('change', function(){
alert('checou ou não checou');
});

HTML:

<form name="rlManejo"><!-- incorporado em edição aqui, mas presente no código original -->
    <div class="select-checkbox">
            <button type="button" class="select-checkbox-btn">Lotes</button>
            <div class="select-checkbox-content lote-checkbox">
                <input type="checkbox" name="lote[]" id="lote-checkbox0" value="1">
                <label for="lote-checkbox0">Lote 1</label>
                <input type="checkbox" name="lote[]" id="lote-checkbox1" value="2">
                <label for="lote-checkbox1">Lote 2</label>
            </div>
        </div>
    </form><!-- incorporado em edição aqui, mas presente no código original -->

CSS:

.select-checkbox-btn {
    padding: 7px !important;
    border: 1px solid #DDD !important;
    color: #FFF !important;
    background-color: #003eff !important; /* #FF6347 */
    background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.21)) !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
}

.select-checkbox {
    width: auto !important;
    height: auto !important;
    margin: 10px 8px 0 0 !important;
    position: relative !important;
    display: inline-block !important;
}

.select-checkbox-content {
    display: none !important;
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    background-color: #f9f9f9 !important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
    z-index: 1 !important;
}

.select-checkbox-content input[type=checkbox]{ display: none !important; }
.select-checkbox-content input[type=checkbox] + label{
    color: black !important;
    width: auto !important;
    padding: 5px 3px !important;
    border: #000 1px solid !important;
    text-decoration: none !important;
    display: block !important;
    cursor: pointer !important;
}
.select-checkbox-content input[type=checkbox]:checked + label{ 
    background-color: #2F4F4F !important; 
    color: white !important; 
}
.select-checkbox-content input:hover {background-color: #f1f1f1 !important; }
.select-checkbox:hover .select-checkbox-content{ display: block !important; }
.select-checkbox:hover .select-checkbox-btn{ display: block !important; }
form[name="getDespesas"] .select-checkbox-content, form[name=D2R] .select-checkbox-content{ width: 200px !important; }
3
  • Como quer que funcione se faz o onChange() nesse elemento 'form[name="rlManejo"] que não existe?
    – LeAndrade
    Commented 14/05/2019 às 19:18
  • Boa tarde, @LeAndrade. No meu código o a div está dentro do form com este nome.
    – E. Coelho
    Commented 14/05/2019 às 19:19
  • Certo, então, uma dica. Toda vez que for formular uma pergunta, coloque o máximo de informações possível com todas as partes referentes ao código em questão.
    – LeAndrade
    Commented 14/05/2019 às 19:23

1 Resposta 1

1

Em seu seletor JQuery é filtrado o elemento form com o atributo name=rlManejo. Basta apenas adicionar a tag form antes do elemento checkbox.

$(function() {
  $('form[name="rlManejo"] input[name="lote[]"]').on('change', function() {
    alert('checou ou não checou');
  });
});
  .select-checkbox-btn {
  padding: 7px !important;
  border: 1px solid #DDD !important;
  color: #FFF !important;
  background-color: #003eff !important;
  /* #FF6347 */
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .21)) !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
}

.select-checkbox {
  width: auto !important;
  height: auto !important;
  margin: 10px 8px 0 0 !important;
  position: relative !important;
  display: inline-block !important;
}

.select-checkbox-content {
  display: none !important;
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  background-color: #f9f9f9 !important;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2) !important;
  z-index: 1 !important;
}

.select-checkbox-content input[type=checkbox] {
  display: none !important;
}

.select-checkbox-content input[type=checkbox]+label {
  color: black !important;
  width: auto !important;
  padding: 5px 3px !important;
  border: #000 1px solid !important;
  text-decoration: none !important;
  display: block !important;
  cursor: pointer !important;
}

.select-checkbox-content input[type=checkbox]:checked+label {
  background-color: #2F4F4F !important;
  color: white !important;
}

.select-checkbox-content input:hover {
  background-color: #f1f1f1 !important;
}

.select-checkbox:hover .select-checkbox-content {
  display: block !important;
}

.select-checkbox:hover .select-checkbox-btn {
  display: block !important;
}

form[name="getDespesas"] .select-checkbox-content,
form[name=D2R] .select-checkbox-content {
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<form name="rlManejo">
  <div class="select-checkbox">
    <button type="button" class="select-checkbox-btn">Lotes</button>
    <div class="select-checkbox-content lote-checkbox">
      <input type="checkbox" name="lote[]" id="lote-checkbox0" value="1">
      <label for="lote-checkbox0">Lote 1</label>
      <input type="checkbox" name="lote[]" id="lote-checkbox1" value="2">
      <label for="lote-checkbox1">Lote 2</label>
    </div>
  </div>
</form>

5
  • Boa tarde, @Victor Carnaval. Eu tenho esse elemento, mas com ou sem ele o comando não funciona. Tô tomando um baile! hehehe
    – E. Coelho
    Commented 14/05/2019 às 19:15
  • @E.Coelho, atualizei a minha resposta apenas adicionando a tag do form e veja que está funcionando. Commented 14/05/2019 às 19:17
  • Coloca um class nos seus inputs ou invés de buscar pelo name="lote[]". Dessa forma que vc fez ele da invalido, como se tivessem 2 objetos com mesmo id. Commented 14/05/2019 às 19:21
  • Aliás, não entendo porque está dando certo aqui no Stack e na minha página não está dando certo. Eu já tentei, por exemplo: $('.lote-checkbox input').on('change', function(){... e não dá certo.
    – E. Coelho
    Commented 14/05/2019 às 19:21
  • Certifique-se de que o JQuery está sendo executado logo após o DOM estar pronto para manipulação; Veja se não existe outro elemento com os mesmos atributos e também se não existe alguma outra função ou evento que está sobrescrevendo essa função. Commented 14/05/2019 às 19:45

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 .