Флажки, сгенерированные с помощью помощника CheckBoxFor, из-за MaterializeCSS превращаются в type = hidden

Я создаю веб-сайт с ASP.NET MVC5 и впервые использую MaterializeCSS, который выглядит как очень интересный фреймворк.

Однако, флажки, сгенерированные помощником CheckBoxFor, становятся скрытыми!
Когда я пишу:

@Html.CheckBoxFor(m => m.IsAgreeTerms)

Сгенерированный HTML-код:

<input name="IsAgreeTerms" type="hidden" value="false">

Почему Материализация меняет мой type=checkbox в type=hidden?
Я пытался добавить type="checkbox" в помощнике CheckboxFor, но это ничего не меняет. Единственный способ это изменить в консоли моего браузера.

Единственное решение, которое я нашел, это эта тема. Однако принятый ответ ничего не меняет для меня.
Другой ответ работает, но я думаю, что некрасиво добавлять какой-либо JS-скрипт для изменения того, что изменяет Materialize без моего согласия.

Есть ли способ сказать "Эй, я прошу type=checkboxтак что пусть мой type=checkbox в сгенерированном HTML"?

Спасибо


ОБНОВЛЕНИЕ:
Мой полный код ASP.NET MVC:

@Html.CheckBoxFor(m => m.IsAgreeTerms, new { @type = "checkbox" })
@Html.LabelFor(m => m.IsAgreeTerms, new { @class = "login-label" })

Полный сгенерированный HTML

<input data-val="true" data-val-required="Le champ IsAgreeTerms est requis." id="IsAgreeTerms" name="IsAgreeTerms" type="checkbox" value="true"
<input name="IsAgreeTerms" type="hidden" value="false">
<label class="login-label" for="IsAgreeTerms">IsAgreeTerms</label>
Источник

3 ответа

Вот решение в виде помощника HTML. Он создает флажок и метку в правильном порядке:

public static IHtmlString CheckBoxWithLabelFor<TModel>(
        this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, bool>> expression,
        string labelText,
        object htmlAttributes = null
    )
{
    if (expression == null)
    {
        throw new ArgumentNullException(nameof(expression));
    }

    var checkBoxWithHidden = htmlHelper.CheckBoxFor(expression, htmlAttributes).ToHtmlString().Trim();
    var pureCheckBox = checkBoxWithHidden.Substring(0, checkBoxWithHidden.IndexOf("<input", 1, StringComparison.Ordinal));
    var labelHtml = htmlHelper.LabelFor(expression, labelText).ToHtmlString().Trim();
    var result = pureCheckBox + Environment.NewLine + labelHtml + Environment.NewLine + $"<input type=\"hidden\" name=\"{ExpressionHelper.GetExpressionText(expression)}\" value=\"false\" />";

    return new MvcHtmlString(result);
}
Источник

ОП здесь. Проблема выглядит более сложной.

На самом деле, при использовании @Html.CheckBoxForMVC5 генерирует 3 поля в следующем порядке:

  • Ваш вклад, с type="checkbox"привязано к вашей модели
  • Скрытое поле (см. Ссылку Клаудио для объяснения)
  • Ваш ярлык, созданный @Html.LabelFor

Проблема в Materialize рассчитывает, что в другом порядке сработает.
В консоли вашего браузера просто переместите <label> элемент между входом и скрытым полем, и все работает отлично!

Я нашел эту очень полезную ссылку, где, в основном, сказано, что порядок сгенерированных полей @Html.checkBoxFor изменится... в MVC6!

Поскольку я работаю с MVC5, я использую это очень уродливое решение в своем _Layout:

$(":checkbox").each(function () {
    $(this).nextAll("label").before($(this))
})

Если у кого-то есть идея получше, пожалуйста, не стесняйтесь опубликовать элегантное решение.

Источник

Есть ли другой html, сгенерированный materialize.css? Я думаю, что это происходит потому, что невозможно применить пользовательский CSS к элементу ввода типа флажка.

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

ОБНОВЛЕНИЕ: Почему флажок HTML генерирует дополнительный скрытый ввод

Источник
Другие вопросы по тегам