Из-за чего checkbox не реагирует на нажатия?

Question

[Андрей]

Доброго дня всем!

Подскажите пожалуйста, из-за чего чекбоксы на странице себя так странно ведут? И как это поправить?
Работаю с дефолтным шаблоном сайта из Visual Studio 2019.

Я сделал красивый checkbox



Всё здорово, но он не реагирует на нажатия(

<div class="custom-control custom-checkbox mb-3">
                                <input type="checkbox" class="custom-control-input" id="custCheckBox" @onchange="eventArgs => { CheckboxClicked(bag, eventArgs.Value); }" />
                                <label class="custom-control-label" for="custCheckBox">@bag.LabResearchId </label>
                            </div>

Если всю красоту убрать, то всё работает.

<div class="form-check">
                                <label class="col-form-label">                                    
                                    <input type="checkbox" @onchange="eventArgs => { CheckboxClicked(bag, eventArgs.Value); }"/ >@LabResId 
                                </label>
                            </div>

То всё замечательно. Правда выглядит не очень(

Как же так?
Буду вам очень благодарен за подсказку/идею.
Спасибо!

Answer 1

[Антон Литвиненко]

Не забываем, что id должен быть уникален для каждого чекбокса и соотверственно лейбы, связанной с ним.
Поэтому более интересным решением будет подобная разметка

<label class="checkbox">
	<input type="checkbox">
	<span class="label_text">Я переключаю чекбокс</span>
</label>

С последующей стилизацией елемента label_text
Вот статья
https://dimox.name/custom-checkboxes-and-radio-but...

Answer 2

[Андрей]

Антон, спасибо вам! Всё получилось. Такой нюанс, описание которого я не встречал. Наверное, для тех кто давно этим занимается, он очевидный. Но для новичка - не очень.


Поскольку checkBox у меня генерируются в цикле, я просто добавил номер к имени.

<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="custCheckBox_@nomer" @onchange="eventArgs => { CheckboxClicked(bag, eventArgs.Value); }" />
<label class="custom-control-label" for="custCheckBox_@nomer">@bag.LabResearchId </label>
</div>

Спасибо!