Клонировать флажок, когда установлен - PullRequest
Новая
       34

Клонировать флажок, когда установлен

0 голосов
/ 29 декабря 2018

Я хочу иметь возможность клонировать флажок при его нажатии, и клонированный флажок будет снят.Когда клонированный флажок установлен, он будет клонировать себя, и процесс повторяется.

                        <section class="misc"> 
                    <div class="row">
                     &nbsp;&nbsp;&nbsp;&nbsp;
                     <label class="label"><input type="checkbox" class="others"> Others:</label>                     
                    </div>           

                    <div class="row">
                     <div class="col-md-6"><input type="text" class="form-control" placeholder="Others"/></div>                          
                    </div>
                    </section>
                    <div class="sth"></div>

                <!-- Clone the "Others" checkbox with textbox when the original checkbox is checked. I want each subsequent clone to be unchecked, then clone itself.. -->
                <script>
                $(".others").change(function(){

                 if($(this).is(':checked'))
                    {
                        var clone=$(this).parents('section').clone();
                        $('.sth').html(clone);
                    }

                });</script>

Прямо сейчас я могу клонировать только оригинал, и клонированный флажок установлен, а не снят.

Jsfiddle: http://jsfiddle.net/cLkvxydh/

1 Ответ

0 голосов
/ 29 декабря 2018
  • Чтобы снять отметку с нового созданного флажка, вы можете использовать .find('.others:checkbox').prop('checked' , false).end();
  • , если вам нужно использовать событие click для динамически генерируемого checkbox, вам нужно будет использовать $(document).on('change',".others" ,function(){ 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="misc"> 
    <div class="row">
     &nbsp;&nbsp;&nbsp;&nbsp;
     <label class="label"><input type="checkbox" class="others"> Others:</label>                     
    </div>           

    <div class="row">
     <div class="col-md-6"><input type="text" class="form-control" placeholder="Others"/></div>                          
    </div>
    </section>
    <div class="sth"></div>
<!-- Clone the "Others" checkbox with textbox when the original checkbox is checked. I want each subsequent clone to be unchecked, then clone itself.. -->
<script>
$(document).on('change',".others" ,function(){

 if($(this).is(':checked'))
    {
        var clone=$(this).parents('section').clone().find('.others:checkbox').prop('checked' , false).end();
        $('.sth').append(clone);
    }

});</script>

Примечание: При использовании html() в $('.sth').html(clone); он будет снова и снова изменять весь HTML, так что вы не заметите эффектакод .. Поэтому я изменил html( на append(, чтобы вы увидели, что код работает

...