1

http://jsfiddle.net/yusy7zr8/2/

Estou usando um plugin de bootstrap: http://www.bootstrap-switch.org/

Estou tentando clonar este checkbox, mas o checkbox não está sendo checkado (para on e off) após ser clonado.

se eu retirar essa parte:

  • o clone dessa checkbox não vai funcionar normalmente.

    $("[name='chk-teste']").bootstrapSwitch();
    
  • se eu retirar esse plugin, funciona (com os comboboxes regulares)

1 Resposta 1

1

Quando você utiliza componentes Bootstrap e outros que transformam inputs HTML, eles modificam o seu DOM adicionando vários outros elementos.

Com o Bootstrap Switch você não tem mais apenas um checkbox, você tem divs para criar o efeito do switch:

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate bootstrap-switch-off" style="width: 102px;">
    <div class="bootstrap-switch-container" style="width: 150px; margin-left: -50px;">
        <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 50px;">ON</span>
        <span class="bootstrap-switch-label" style="width: 50px;">&nbsp;</span>
        <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 50px;">OFF</span>
        <input type="checkbox" name="chk-teste">
    </div>
</div>

Assim, você deve remover todos os divs, adicionar um novo checkbox e ativá-lo como um Bootstrap Switch. Adicionei alguns trechos no seu código existente:

var ativador = function () { $(this).bootstrapSwitch({}); };

var acao = function() {
    var campo = this;

    if (campo.value == "+") {
        var tr = campo.parentNode.parentNode;
        var novoTr = tr.cloneNode(true);
        var botoesNovos = novoTr.getElementsByClassName('btn-add');

        // Remove o DIV do checkbox bootstrap (pode dar blink na tela)
        $(novoTr).find('div').remove();        

        // Adiciona um checkbox "puro"
        var $novoCheck = $('<input>', {
           "type": 'checkbox',
           "data-widget": 'bootstrap-switch'
        });
        $('td:first', $(novoTr)).append($novoCheck);
        // Transforma o checkbox em bootstrap-switch
        ativador.apply($novoCheck);

        for(var i=0;i<botoesNovos.length;i++){          
            botoesNovos[i].addEventListener('click', acao, false);
        }

        tr.parentNode.insertBefore(novoTr, tr.nextSibling);
    } 
};

Em funcionamento: http://jsfiddle.net/twmh7324/

Outra dica: coloque nomes únicos nos elementos clonados. Exemplo: ao clonar a linha, mude o id dela para linha-[count]. Sendo count uma variável contadora, onde você incrementa a cada clonagem.

1
  • Nota: no post original eu coloquei o link errado para o fiddle. Editei com o link correto. 4/08/2015 às 1:17

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 .