Why is the checkbox not responding to clicks?

Question

Bootstrap

Good day everyone!

Can you please tell me why the checkboxes on the page behave so strangely? And how to fix it?
I work with the default site template from Visual Studio 2019.

I made a beautiful checkbox



Everything is great, but it does not respond to clicks (

<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>

If you remove all the beauty, then everything works.

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

That's all wonderful. The truth doesn’t look very good (

How is it?
I would be very grateful for your hint / idea.
Thank you!

Answer 1

Do not forget that the id must be unique for each checkbox and, accordingly, the label associated with it.
Therefore, a more interesting solution would be a similar markup

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

With subsequent styling of the label_text element
Here is the article
https://dimox.name/custom-checkboxes-and-radio-but...

Answer 2

Anton, thank you! Everything worked out. Such a nuance, the description of which I have not seen. Probably, for those who have been doing this for a long time, it is obvious. But for a beginner, not so much.

Since my checkBoxes are generated in a loop, I just added a number to the name.

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

Thank you!