A
A
Andrey2020-12-13 23:54:07
Bootstrap
Andrey, 2020-12-13 23:54:07

Why is the checkbox not responding to clicks?

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

5fd67d2843b05176170943.png

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.

5fd67dc2889e9780535384.png

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

In order to leave comments, you need to log in

2 answer(s)
A
Anton Litvinenko, 2020-12-14
@andrey71

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

A
Andrey, 2020-12-14
@andrey71

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.
5fd707567fcf6493384132.png
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!

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question