mercredi 11 décembre 2019

How can i be able to toggle "checkbox" for dynamically cloned or generated?

I am trying to add dynamic checkboxes but after adding them i am unable to check them on click

Hi guys, I am adding input fields i.e checkboxes dynamically using formValidation.min.js where i was successful in adding the checkboxes but unfortunately i am unable to check them or toggle checked status on any of the checkboxes that are created dynamically. can anyone help me figure this out please!

Thanks in advance!

Here is a piece of my code

<div class="input-group" style="margin-bottom: 3px;">
                                            <input type="text" name="item[0][objective]" class="form-control">
                                            <span class="input-group-addon">
                                                <input type="checkbox" value="1" name="item[0][status]">
                                            </span>
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
                                            </span>
                                        </div>
                                        <!-- Template -->
                                        <div class="input-group hide" id="bookTemplate" style="margin-bottom: 3px;">
                                            <input type="text" name="objective" class="form-control">
                                            <span class="input-group-addon">
                                                <input type="checkbox" value="2" class="form-control checkbox-status" name="status">
                                            </span>
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
                                            </span>
                                        </div>

Javascript


$(document).ready(function() {
    bookIndex = 0;

    $('#createQuestionForm')
       // Add button click handler
       .on('click', '.addButton', function() {
            bookIndex++;
            var $template = $('#bookTemplate'),
               $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .attr('data-book-index', bookIndex)
                                .insertBefore($template);

            // Update the name attributes
            $clone
               .find('[name="objective"]').attr('name', 'item[' + bookIndex + '][objective]').end()
               .find('[name="status"]').attr('name', 'item[' + bookIndex + '][status]').end();
       })

       // Remove button click handler
       .on('click', '.removeButton', function() {
            var $row  = $(this).parents('.input-group'),
               index = $row.attr('data-book-index');

            // Remove fields
            $('#bookForm')
               .formValidation('removeField', $row.find('[name="item[' + index + '][objective]"]'))
               .formValidation('removeField', $row.find('[name="item[' + index + '][status]"]'));

            // Remove element containing the fields
            $row.remove();
       });
});

Anyone with an idea on how to make the checkboxes that are cloned checkable??




Aucun commentaire:

Enregistrer un commentaire