带有复选框错误

Question

我有两个问题：

第1期：

我希望所选的项目名称显示在“未选择”部分中，例如Example 现在，如果选择了第一个项目，则只显示第一个项目，否则即使选择了多个项目也是“未选择”。

以下是js代码：JS Code for multiselect dropdown

这是HTML代码：

<div class="form-group">
    <label class="col-sm-4 control-label" for="rolename">Add Addons</label>
     <div class="col-sm-8">
        <select id="dates-field2" data-role="addonsinput" class="multiselect-ui form-control" name="addons[0]" id="trigger3" data-role="multipleselect" multiple="multiple">
           @foreach($addons as $addon)
              <option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
        @endforeach
        </select>
     </div>
</div>

第二期：

我使用这个JS在HTML中动态创建字段：

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

				if(this.name == 'tags[0]'){
					$(this).tagsinput('destroy');
					$(this).tagsinput('removeAll');
					this.name = this.name.replace('[0]','['+i+']');
					var new_container = $(this).closest('[class="form-group"]');
					new_container.find(".bootstrap-tagsinput:first").remove();
				} 
				else {
					$(this).val('');
				}
            });
			i+=1;
            container.append(new_field_group);
        }
    );
});

<div class="card">
	<div class="card-body ">
		<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
		{{ csrf_field() }} 
			<div data-role="dynamic-fields">
					<div class="form-horizontal">
 						<div class="row">
 							<div class="col-sm-6">
								<div class="form-group">
									<label for="Firstname5" class="col-sm-4 control-label">Enter Dish Name</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
										</div>
									</div>
								</div>
							<div class="col-sm-6">
								<div class="form-group">
						       <label for="Firstname5" class="col-sm-4 control-label">Enter Dish Price(In Rupees)</label>
						          <div class="col-sm-8">
												<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
											</div>
									</div>
								</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label for="Firstname5" class="col-sm-4 control-label">Select Food Type</label>
										<div class="col-sm-8">
											<select id="select1" class="form-control" name="select[]" required>
												@foreach($types as $type)
												<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
												@endforeach
											<select>
												<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
							       </div>
										</div>
									</div> 
								<div class="col-sm-6">	
									<div class="form-group">
										<label for="Firstname5" class="col-sm-4 control-label">Enter Associated Tags</label>
																<div class="col-sm-8">
                                                              	    <input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="Tags" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
											            
											        </div>
											        <div class="row">
											        	<div class="col-sm-6">
											                <div class="form-group">
											                	<label for="Firstname5" class="col-sm-4 control-label">Dish Description</label>
											                	<div class="col-sm-8">
																    <input name="Description[]" id="field-value" class="form-control">
															    </div>
															</div> 
											            </div>
											            <div class="col-sm-6 contacts">
											            	<div class="form-group">
											            		<label class="col-sm-4 control-label" for="rolename">Add Addons</label>
											            		<div class="col-sm-8">
											            			<select id="dates-field2" data-role="addonsinput" class="multiselect-ui form-control" name="addons[0]" id="trigger3" data-role="multipleselect" multiple="multiple">
											            				@foreach($addons as $addon)
											            					<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
											            				@endforeach
											            			</select>
											            		</div>
											            	</div>
											            </div>
											        </div>
											        <div class="row">
											          <div class="col-sm-6">
                                                        <div class="col-sm-5">
											                <div class="checkbox checkbox-styled">
											                	<label><em>Half Plate Price(if any)</em>
											                	    <input type="checkbox" value="" class="trigger2" id="trigger2" name="question"> 
											                	</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div id="hidden_fields2" class="hidden_fields2" style="display:none;">
                                                            	<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control"> 
                                                            </div>
                                                        </div>
                                                       </div>
                                                       <div class="col-sm-6">
                                                        <div class="col-sm-5">
											                <div class="checkbox checkbox-styled">
											                	<label><em>Quarter Plate Price</em>
											                		<input type="checkbox" value="" class="trigger" id="trigger" name="question"> 
											                	</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div id="hidden_fields" class="hidden_fields" style="display:none;">
                                                            	<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control" > 
                                                            </div>
                                                        </div>
                                                       </div>
                                                    </div>
													<br>
											        <button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
														Delete Item
													</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"] --><br>
											<div class="form-group">   
											    <button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary">Submit Items</button>
										    </div><!--end .form-group -->
										</form>
									</div><!--end .row -->
							    </div><!--end .card-body -->

现在，重复字段正在复制第一个复选框。我希望它在动态创建时处于“无选择”模式。

任何线索都会有所帮助。提前谢谢。