How to postback a checkbox in MVC - html

Question

I have a controller:
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using MvcApplication5.Models;
namespace MvcApplication5.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var car = new Car { Sold = true };
return View(car);
}
[HttpPost]
public ActionResult Index(Car car)
{
return View(car);
}
public ActionResult About()
{
return View();
}
}
}
Model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication5.Models
{
public class Car
{
public bool Sold { get; set; }
}
}
Here's the view:
#model MvcApplication5.Models.Car
#using (Html.BeginForm())
{
#Html.CheckBoxFor(m => m.Sold, new { #class = "sold" })
#Html.HiddenFor(m => m.Sold)
<div class="disable">Disable</div>
<button type="submit" value="Submit">Submit</button>
}
<script type="text/javascript">
$(function () {
$('.disable').click(function () {
$('.sold').attr("disabled", "disabled");
});
})
</script>
So what I'm trying to achieve here is you come in and the checkbox is checked. If you click submit the value is posted back fine. However if you click disable the checkbox becomes disabled. You then click submit. I was expecting because the checkbox is still checked and I've added a hidden field the value posted back for sold would be true. That's the whole point of why I added the hidden field.
Can anyone tell me why the checkbox when checked but disabled posts back false for Sold when there is a hidden field that should be maintaining the value?

Answer 1

disabled=disabled doesn't send values, what you want to preserve the value by to disable it from being updated is readonly=readonly. i.e.
$('.sold').attr("readonly", "readonly");
You'll also need to apply some CSS to make it look disabled.