Как установить флажки с помощью JQuery / JavaScript в Laravel - PullRequest
0 голосов
/ 10 ноября 2019

У меня есть форма с кнопкой, которая добавляет новый вопрос при нажатии. На каждый вопрос есть несколько ответов, и я хочу установить флажки, чтобы указать, правильный ли это ответ.

<div class="col-md-10">
    <div class="box box-primary">
        <div class="box-header">
            <h3 class="box-title">Register</h3>
        </div>

        <div class="box-body">
            <form method="post" action="{{url('departments')}}" enctype="multipart/form-data">
                @csrf
                <div class="form-group row">
                    <label for="name" class="col-md-2 col-form-label text-md-right">{{ __('Question') }}</label>

                    <div class="col-md-6">
                        <input id="question" type="text" class="form-control{{ $errors->has('question') ? ' is-invalid' : '' }}" name="question" value="{{ old('question') }}" placeholder="Enter Question Here">
                        @if ($errors->has('question'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('question') }}</strong>
                        </span>
                        @endif

                    </div>
                </div>
                <div class="form-group row">
                    <label for="name" class="col-md-2 col-form-label text-md-right">{{ __('Options') }}</label>

                    <div class="col-md-2">
                        <input type="checkbox" name="checkbox1">
                        <input id="option1" type="text" class="form-control{{ $errors->has('option1') ? ' is-invalid' : '' }}" name="option1" value="{{ old('option1') }}" placeholder="Option1">
                        @if ($errors->has('option1'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('option1') }}</strong>
                        </span>
                        @endif
                    </div>
                    <div class="col-md-2">
                        <input type="checkbox" name="checkbox2">
                        <input id="option2" type="text" class="form-control{{ $errors->has('option2') ? ' is-invalid' : '' }}" name="option2" value="{{ old('option2') }}" placeholder="option2">
                        @if ($errors->has('option2'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('option2') }}</strong>
                        </span>
                        @endif
                    </div>
                    <div class="col-md-2">
                        <input type="checkbox" name="checkbox3">
                        <input id="option3" type="text" class="form-control{{ $errors->has('option3') ? ' is-invalid' : '' }}" name="option3" value="{{ old('option3') }}" placeholder="option3">
                        @if ($errors->has('option3'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('option3') }}</strong>
                        </span>
                        @endif
                    </div>
                    <div class="col-md-2">
                        <input type="checkbox" name="checkbox4">
                        <input id="option4" type="text" class="form-control{{ $errors->has('option4') ? ' is-invalid' : '' }}" name="option4" value="{{ old('option4') }}" placeholder="option4">
                        @if ($errors->has('option4'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('option4') }}</strong>
                        </span>
                        @endif
                    </div>
                </div>

                <div class="input-group hdtuto control-group lst increment">
                    <div class="input-group-btn">
                        <button class="btn btn-success" type="button"><i class="fldemo glyphicon glyphicon-plus"></i>Add</button>
                    </div>
                </div>

                <div class="clone hide">
                    <div class="hdtuto control-group lst input-group" style="margin-top:10px">
                        <div class="form-group row">
                            <label for="name" class="col-md-2 col-form-label text-md-right">{{ __('Question') }}</label>

                            <div class="col-md-6">
                                <input id="question" type="text" class="form-control{{ $errors->has('question') ? ' is-invalid' : '' }}" name="question" value="{{ old('question') }}" placeholder="Enter Question Here">
                                @if ($errors->has('question'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('question') }}</strong>
                                </span>
                                @endif

                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-md-2 col-form-label text-md-right">{{ __('Options') }}</label>

                            <div class="col-md-2">
                                <input type="checkbox" name="checkbox1">
                                <input id="option1" type="text" class="form-control{{ $errors->has('option1') ? ' is-invalid' : '' }}" name="option1" value="{{ old('option1') }}" placeholder="Option1">
                                @if ($errors->has('option1'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('option1') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="col-md-2">
                                <input type="checkbox" name="checkbox2">
                                <input id="option2" type="text" class="form-control{{ $errors->has('option2') ? ' is-invalid' : '' }}" name="option2" value="{{ old('option2') }}" placeholder="option2">
                                @if ($errors->has('option2'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('option2') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="col-md-2">
                                <input type="checkbox" name="checkbox3">
                                <input id="option3" type="text" class="form-control{{ $errors->has('option3') ? ' is-invalid' : '' }}" name="option3" value="{{ old('option3') }}" placeholder="option3">
                                @if ($errors->has('option3'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('option3') }}</strong>
                                </span>
                                @endif
                            </div>
                            <div class="col-md-2">
                                <input type="checkbox" name="checkbox4">
                                <input id="option4" type="text" class="form-control{{ $errors->has('option4') ? ' is-invalid' : '' }}" name="option4" value="{{ old('option4') }}" placeholder="option4">
                                @if ($errors->has('option4'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('option4') }}</strong>
                                </span>
                                @endif
                            </div>
                        </div>

                        <div class="input-group-btn">
                            <button class="btn btn-danger" type="button"><i class="fldemo glyphicon glyphicon-remove"></i> Remove</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Вот часть JQuery для добавления каждого вопроса:

$(function () {
    $(".btn-success").click(function () {
        var html = $(".clone").html();
        $(".increment").after(html);
    });

    $("body").on("click", ".btn-danger", function () {
        $(this).parents(".control-group").remove();
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...