Одинаковые label для фильтров типа флажки

[AlexB]

Не нашел своей ошибки на форуме. Решил создать тему.

Суть:

При создании двух и более фильтров типа флажки, тег <label> в любой форме флажков указывает всегда на первый фильтр. Причем независимо в одной секции фильтры или в разных. Т.е. надо уникализировать лейблы и вэлью разных фильтров.

Просьба поправить.

Приложил видео в архиве.

[support]

Не понял где проблема. Дайте скриншет.

[AlexB]

Код: Выделить всё

<div class="col-sm-3 filters-panels vertical-filters-panels">	
				
					<div class="filters-panels-1">
					<div class="fields-container">				
				<div class="heading">
					Фильтр по бренду: <a href="javascript:delete_field_fielter_value(301)" title="Сброс"><i class="fa fa-times" aria-hidden="true"></i></a>						
			    </div><div class="panel-field-container"><div class="select_checkboxes_tag"><div><label for="values_1"><div class="checker" id="uniform-values_1"><span><input name="values[]" id="values_1" value="1" type="checkbox" class="filters-panels-checkbox-fields filters-panels-checkbox-field-301" data-field-id="301"></span></div> Fusitek</label></div><div><label for="values_2"><div class="checker" id="uniform-values_2"><span><input name="values[]" id="values_2" value="2" type="checkbox" class="filters-panels-checkbox-fields filters-panels-checkbox-field-301" data-field-id="301"></span></div> FV-Plast</label></div><div><label for="values_3"><div class="checker" id="uniform-values_3"><span><input name="values[]" id="values_3" value="3" type="checkbox" class="filters-panels-checkbox-fields filters-panels-checkbox-field-301" data-field-id="301"></span></div> Viega</label></div></div> <label for="values[]" class="error"></label></div></div>
						<div class="buttons">
							
							<a href="javascript: reset_panel_filters(1)" class="btn btn-default" title="Cбросить фильтры"><i class="fa fa-refresh" aria-hidden="true"></i> Сброс</a>
						</div>
					</div>
					<div class="filters-panels-4">
					<div class="fields-container">				
				<div class="heading">
					Фильтр по категории товара: <a href="javascript:delete_field_fielter_value(309)" title="Сброс"><i class="fa fa-times" aria-hidden="true"></i></a>						
			    </div><div class="panel-field-container"><div class="select_checkboxes_tag"><div><label for="values_1"><div class="checker" id="uniform-values_1"><span><input name="values[]" id="values_1" value="1" type="checkbox" class="filters-panels-checkbox-fields filters-panels-checkbox-field-309" data-field-id="309"></span></div> Фитинги из полипропилена</label></div><div><label for="values_2"><div class="checker" id="uniform-values_2"><span><input name="values[]" id="values_2" value="2" type="checkbox" class="filters-panels-checkbox-fields filters-panels-checkbox-field-309" data-field-id="309"></span></div> Трубы из полипропилена</label></div><div><label for="values_3"><div class="checker" id="uniform-values_3"><span><input name="values[]" id="values_3" value="3" type="checkbox" class="filters-panels-checkbox-fields filters-panels-checkbox-field-309" data-field-id="309"></span></div> Медные фитинги под пайку</label></div></div> <label for="values[]" class="error"></label></div></div>
						<div class="buttons">
							
							<a href="javascript: reset_panel_filters(4)" class="btn btn-default" title="Cбросить фильтры"><i class="fa fa-refresh" aria-hidden="true"></i> Сброс</a>
						</div>
					</div>				
			</div>

Скриншот.

Есть два (три, пять - неважно, главное более одного) фильтра на странице сущности, типа флажки.
При нажатии на лейбл первого значения второго фильтра происходит выбор (фактическое нажатие) первого элемента первого фильтра из-за того что лейблы первых значений и первого и второго фильтра одинаковы (и соответственно id инпутов в виде чекбоксов тоже), а именно равны <label for="values_1">. Происходит ошибка так потому-что они не уникально генерируются.

По правилам HTML чтобы корректно работало, надо чтобы было так:
В первом фильтре
<label for="values_1"> <input name="values[]" id="values_1" value="1" type="checkbox">
В последующих фильтрах
<label for="values_1_что_то_уникальное_n"> <input name="values[]" id="values_1_что_то_уникальное_n" value="1" type="checkbox">

Так понятно объяснил?

А видео смотрели?

Загрузил код на jsfiddle.net

https://jsfiddle.net/bkpmzg7a/2/

Чтобы возпроизвести ошибку нажмите на текст "Viega" в первом фильтре и "Медные фитинги под пайку" во втором фильтре, при любом нажатии будет выбираться чекбокс "Viega".

[support]

Ясно. Файл из архива замените в includes\functions\
Сообщите результат.

Я убрал опцию for для тега label. Она там не нужна, так как флажок внутри тега label.

[AlexB]

Ок. Заработало.