Question

我创建了两个javascript。

1.当我点击复选框时，输入字段出现，当我取消选中时，输入字段消失。

2.其次是当我点击添加更多项目时，再次创建所有字段。

现在的问题是何时创建了第二个以及更多项目，复选框无效。

HTML代码：

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div data-role="dynamic-fields">
                <div class="form-inline">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <input type="text" class="form-control" id="Name1" placeholder="Food Name" name="Name1" style="width:120%;" required data-rule-minlength="2">
                                <label class="sr-only" for="field-name">Name</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <input type="text" class="form-control" id="field-value" placeholder="Description" style="width:120%;" required>
                                <label class="sr-only" for="field-value">Description</label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <select id="select1" name="select1" style="width:130%;" class="form-control" required>
                                    <option value=""></option>
                                    <option value="1">Food Type 1</option>
                                    <option value="2">Food Type 2</option>
                                    <select>
                                        <label for="select1">Food Type</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <input type="text" value="" class="form-control" data-role="tagsinput" placeholder="Tags" />
                                <label class="sr-only" for="field-tags">Tags</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-inline">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="Name1" placeholder="Price" name="price" style="width:120%;" required data-rule-minlength="2">
                                    <label class="sr-only" for="field-name">Price</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="checkbox checkbox-styled">
                                    <label><em>Half Plate Price</em>
                                        <input type="checkbox" value="" id="trigger2" name="question"> </label>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div id="hidden_fields2">
                                    <input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
                            </div>
                            <div class="col-md-3">
                                <div class="checkbox checkbox-styled">
                                    <label><em>Quarter Plate Price</em>
                                        <input type="checkbox" value="" id="trigger" name="question"> </label>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div id="hidden_fields">
                                    <input type="text" id="hidden_field" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-100px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-icon-toggle btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove"> <span class="md md-delete"></span> </button>
                    <button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add"> Add More Items </button>
                </div>
                <!-- /div.form-inline -->
            </div>
            <!-- /div[data-role="dynamic-fields"] -->
        </div>
        <!-- /div.col-md-12 -->
    </div>
    <div class="form-group">
        <button type="button" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary">Submit Items</button>
    </div>
    <!--end .form-group -->
</div>

Checkbox Js：

<script type="text/javascript">
$(function() {
    // Get the form fields and hidden div
    var checkbox = $("#trigger");
    var hidden = $("#hidden_fields");
    hidden.hide();
    checkbox.change(function() {
        if (checkbox.is(':checked')) {
            // Show the hidden fields.
            hidden.show();
        } else {
            // Make sure that the hidden fields are indeed
            // hidden.
            hidden.hide();
            $("#hidden_field").val("");
        }
    });
});
$(function() {
    var checkbox = $("#trigger2");
    var hidden = $("#hidden_fields2");
    hidden.hide();
    checkbox.change(function() {
        if (checkbox.is(':checked')) {
            // Show the hidden fields.
            hidden.show();
        } else {
            hidden.hide();
            $("#hidden_field2").val("");
        }
    });
});
</script>

添加更多项目JS：

$(function() {
    // Remove button 
    $(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]', function(e) {
        e.preventDefault();
        $(this).closest('.form-inline').remove();
    });
    // Add button 
    $(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="add"]', function(e) {
        e.preventDefault();
        var container = $(this).closest('[data-role="dynamic-fields"]');
        new_field_group = container.children().filter('.form-inline:first-child').clone();
        new_field_group.find('input').each(function() {
            $(this).val('');
        });
        container.append(new_field_group);
    });
});

页面屏幕截图：

Answer 1

这里有几个问题：

您正在克隆元素，然后尝试通过相同的ID访问它们（您应该使用类）
您的功能不仅仅针对已点击的元素，而是使用选择器的任何元素。
您正在克隆元素，因此您需要将click事件绑定到非克隆元素：例如通过$(document).on

我已经更新了一些代码来演示我正在谈论的内容。在html中，我已将trigger2和hidden_fields2元素以及display:none样式中的类添加到隐藏字段中，因此默认情况下会隐藏它们。：

<div class="col-md-2">
    <div class="checkbox checkbox-styled">
        <label><em>Half Plate Price</em>
            <input type="checkbox" value="" class="trigger2" id="trigger2" name="question"> </label>
    </div>
</div>
<div class="col-md-1">
    <div id="hidden_fields2" class="hidden_fields2" style="display:none;">
        <input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>

在javascript中，我已将函数更改为从$(document).on事件绑定运行，并使用元素类而不是id。我还更改了代码，因此它只会影响您更改的复选框和最近的隐藏元素：

$(function() {
     $(document).on('change', '.trigger2', function(){
        var checkbox = $(this);
        var parent = checkbox.closest('.form-inline');
        var hidden = parent.find(".hidden_fields2");
         hidden.hide();
        if (checkbox.is(':checked')) {
            // Show the hidden fields.
            hidden.show();
        } else {
            hidden.hide();
            $(".hidden_field2").val("");
        }
    });
});

您需要在其他功能和输入上使用相同的逻辑。

第二次复选框不起作用

1 个答案: