Использование <label for = ""> с визуализированным элементом HtmlHelper с идентификатором, который содержит пробел

Question

Если у меня есть простой флажок <input> элемент с id атрибут, который содержит пробел, я все еще могу использовать <label for=""> чтобы привязать метку к элементу, а затем щелкните текст метки, чтобы переключить значение флажка:

<input type="checkbox" id="remember me" />
<label for="remember me">Remember me</label>

Однако, если я создам то же самое <input> элемент, использующий класс HtmlHelper, <label for=""> похоже, не привязывает ярлык к тексту ярлыка. Когда я нажимаю на текст метки, флажок не переключается:

@Html.CheckBox("remember me")
<label for="remember me">Remember me</label>

Почему поведение отличается, когда я использую HtmlHelper? Можно ли использовать <label for=""> с визуализированным элементом HtmlHelper, который имеет id что содержит пробел?

---

Обратите внимание, основная цель этого вопроса - задокументировать кое-что интересное, что я обнаружил. Согласно стандартам HTML 5, id Атрибут должен содержать хотя бы один символ и не должен содержать пробелов. Я наткнулся на некоторый код, который явно не следовал рекомендациям W3C, и, убирая его, нашел решение для вышеуказанной проблемы, поэтому я решил, что могу также поделиться тем, что нашел, в случае, если это может помочь кому-то в будущем.

Answer 1

Когда HtmlHelper создает <input> элемент, он заменяет все пробелы в id атрибут с подчеркиванием.

Если вы проверите визуализированный HTML-код, вы увидите input Элемент отображается следующим образом:

<input id="remember_me" name="remember me" value="true" type="checkbox">

Если вы хотите связать метку с вышеуказанным элементом, вам нужно заменить все пробелы на подчеркивания в forстрока:

@Html.CheckBox("remember me")
<label for="remember_me">Remember me</label>

---

Другой способ избежать описанной выше проблемы - пропустить for="" приписать все вместе, и просто обернуть <label> пометить весь input элемент:

<label>
    @Html.CheckBox("remember me")
    Remember me
</label>

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