Why does my checkbox in ASP.NET MVC4 always give a value of false?

Question

I have the following I coded directly in HTML:

<label for="RememberMe">
    <input type="checkbox" name="RememberMe" id="RememberMe" value="true" />
    <span>Remember me?</span>
    <input name="RememberMe" type="hidden" value="false">
</label>

When I submit the form I get other values but the checkbox always returns false. I know that in the sample application they use something like this. So how come it does not work for me? Note that I had to use this style as it's the one my CSS is expecting. That's why I did not just use the html.checkbox way of coding.

Here's my viewmodel:

public class LoginViewModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

The viewmodel is the same as used in the MVC samples.

Here's the CSS I am using:

label {
    display:block;
}

input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
}

input[type="radio"] + span:before {
  content: "\f10c"; 
}

input[type="radio"]:checked + span:before {
  content: "\f111";
}

input[type="checkbox"] + span:before {
  content: "\f096";
}

input[type="checkbox"]:checked + span:before {
  content: "\f046";
}

Here's the full code:

  <form action="/Account/Login" id="login-form" class="form" method="post">
        @Html.AntiForgeryToken()

        <div id="input-fields">
            <div>
                @Html.TextBoxFor(m => m.UserName, new
                                    {
                                        id = "user-name",
                                        placeholder = "Username (or guest)",
                                        required = "required ",
                                        @size = "25"
                                    })
            </div>
            <div>
                @Html.PasswordFor(m => m.Password, new
                                    {
                                        placeholder = "Password (or guest)",
                                        required = "required ",
                                        @size = "25"
                                    })
            </div>

            <label for="RememberMe">
                <input type="checkbox" name="RememberMe" id="RememberMe" value="true" />
                <span>Remember me?</span>
                <input name="RememberMe" type="hidden" value="false">
            </label>



        </div>
        <button class="medium default" id="login" type="submit">Login</button>
        <button class="medium" id="register" type="button" onclick="location.href='/Account/Register'">Register</button>
    </form>

There is also this javascript:

<script type="text/javascript">
        (function () {
            document.getElementsByClassName('form')[0]
                .addEventListener("submit", function (ev) {
                    document.getElementById("login").disabled = true;
                    document.getElementById("register").disabled = true;
                    document.getElementById("RememberMe").disabled = true;
                    document.getElementById('message').innerHTML = ev.target.getAttribute('id') == "register-form" ? "System: Registering " : "System: Authenticating ";
                    setInterval(function () {
                        document.getElementById('message').innerHTML += '. ';
                    }, 3000);
                }, false);
        })();
    </script>

Can you show the relevant code, i.e. the controller? The CSS seems less relevant. — CodeCaster
– CodeCaster, Commented Dec 30, 2013 at 10:37
I'm using the standard ASP.NET MVC sample code. I will post details of the view model. However what I doing is checking with fiddler and in all cases I see: things like: __RequestVerificationToken=FY0uW5XRcoE6GC_pdu_2SnGpEeLoXnD8tq1doiPEKK1yFVBW2GUsMIMsEvWMW_wzAt2xQt0_miscSgIBv-2mQcj1oZ-CscVB-NNAt0v4TZ41&UserName=abcdeddddd&Password=dddddddd&RememberMe=false — Samantha J T Star
– Samantha J T Star, Commented Dec 30, 2013 at 10:43

Richard Dalton · Accepted Answer · 2013-12-30 11:32:54Z

2

It looks like you are disabling the checkbox when the form submits. This could be stopping the checkbox value from being passed so it will default to the hidden field value.

Try removing this line from the javascript:

document.getElementById("RememberMe").disabled = true;

answered Dec 30, 2013 at 11:32

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does my checkbox in ASP.NET MVC4 always give a value of false?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related