Флажок второго таймера не работает

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>

Флажок 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);
    });
});

Скриншот страницы: Это страница введите описание изображения здесь

javascript,jquery,html,checkbox,

1

Ответов: 1

JavaScript, JQuery, HTML, флажок,

Похожие вопросы

score 1 · Accepted Answer

1 принят

Здесь есть пара проблем:

Вы клонируете элементы, а затем пытаетесь получить к ним доступ через один и тот же идентификатор (вы должны использовать класс)
Ваши функции не нацелены только на элемент с кликом, а на любой элемент с селектором.
Вы клонируете элементы, поэтому вам нужно связать событие 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привязки событий и использовал класс element вместо 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("");
        }
    });
});

Вам нужно использовать ту же логику для других функций и входов.