我如何能够切换“复选框”以进行动态克隆或生成?

时间:2019-12-11 10:22:46

标签: javascript jquery html checkbox formvalidation.io

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

大家好,我正在使用formValidation.min.js动态添加输入字段,即复选框,在此我成功添加了复选框,但不幸的是,我无法对其进行检查或在任何动态创建的复选框上切换选中状态。谁能帮我解决这个问题!

谢谢!

这是我的一部分代码

<form action="" id="createQuestionForm" enctype="multipart/form-data">
<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>
</form>

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();
       });
});

任何人都有关于如何使克隆的复选框可检查的想法?

0 个答案:

没有答案