Пользовательский флажок MVC Razor обновляет «настоящий»

Question

Я новичок, поэтому, пожалуйста, потерпите меня здесь.Я работаю над формой в MVC и хочу иметь пользовательский флажок.Я как-то нахожу способ заставить его работать так, как я хочу:

• скрывая флажок формы
• продолжая использовать метку флажка, чтобы отобразить его назначение
• вставка html-метки и ввод в сочетании со сценарием для ретрансляции значения флажка

Соответствующий раздел моего представления выглядит следующим образом:

<div id="loginRememberMeArea" class="formCheckBoxArea col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6">
    @Html.CheckBoxFor(m => m.RememberMe, new { @id = "loginRememberMeField", @class = "formCheckBoxField" })
    <input id="loginRememberMeCheckBoxHelper" class="formCheckBoxHelper" type="checkbox" value="checkbox1" name="" />
    <label id="loginRememberMeCheckBox" class="formCheckBox" for="loginRememberMeCheckBoxHelper"></label>
    @Html.LabelFor(m => m.RememberMe, new { @id = "loginRememberMeLabel", @class = "formCheckBoxLabel" })
</div>

И яиспользуя этот скрипт, чтобы выполнить «магию»:

<script>
    $(document).ready(function () {
        $("input[type='checkbox']").bind('click', function () {
            var $t = $(this),
                val = $t.val(),
                key = val.charAt(val.length - 1);
            if ($t.val() == 'checkbox'+key && $t.is(':checked')) {
                $("#loginRememberMeField").attr('checked', true);
            }
            else {
                $("#loginRememberMeField").attr('checked', false);
            }
        });
    });
</script>

Теперь, похоже, это работает без проблем: когда я проверяю флажок «поддельный», сценарий обязательно проверяет флажок «настоящий» (#loginRememberMeField), а также.Это также работает противоположным образом, когда снимите флажок «поддельный», он обновит флажок «настоящий». И затем он ломается: При повторном выборе флажка «реальный» флажок не будет обновлен.Я не могу понять, почему.Заранее благодарю за помощь!

Обновление: Что я сделал для настройки стиля флажка, так это то, что я скрыл настоящий флажок (loginRememberMeField), использовал метку (loginRememberMeCheckBox) для стилизациифлажок, поместил его поверх привязанного чекбокса (loginRememberMeCheckBoxHelper).Следовательно, когда я нажимаю на ярлык (который отображает флажок), флажок-пустышка (loginRememberMeCheckBoxHelper) проверяется.До сих пор все работает отлично прекрасно бесконечное количество раз.Теперь предполагается, что скрипт расширяет логику скрытого, реального (флажок loginRememberMeField) флажка, поэтому правильное значение передается в БД при отправке формы.Эта последняя часть не работает, но ставит / снимает галочку с реального флажка (loginRememberMeField), но один раз, после этого он больше не работает.

Вот ссылка, откуда я взял это и где он, по-видимому, находитсяработая бесконечное количество раз

Конечно, мне пришлось немного измениться, но я приложил все усилия, чтобы сохранить все необходимое (что, я думаю, почему оно работает изначально ...)

Answer 1

StephenMuecke решил это .. изменил скрипт на следующий, и теперь он работает отлично!

<script>
    $('.formCheckBoxHelper').click(function () {
        var isChecked = $(this).is(':checked');
        $(this).closest('.container').find('.formCheckBoxField').prop('checked', isChecked)
    })
</script>