Set MVC checkbox to readonly (or disabled) on client-side

Question

We have several MVC checkboxes, such as:

@Html.CheckBoxFor(model => model.hasData, …)

We have conditional client-side code that needs to set all controls in a div to readonly (which includes these checkboxes):

if (someCondition) {
    $('#' + divIdToDisable + ' input').attr('readonly', 'true');
}

We’ve learned that readonly doesn’t work properly on checkboxes (see below).

I’ve tried the following, but this causes no data to be posted back during a ‘save’ (see below also):

 $('#' + divIdToDisable + ' input').attr('disabled', 'true');

This seems to be a common issue, however in all my research I haven’t found a good client-side solution.

---

Here’s my research:

Readonly on checkboxes doesn’t always work in all browsers:

Can HTML checkboxes be set to readonly?

How can I make a checkbox readonly? not disabled?

Using ‘disabled’ with MVC results in no value being posted back:

Html.CheckBox returns false if disabled, even if seleced

http://davecallan.com/posting-disabled-checkboxes-mvc-razor-views/

It’s possible to implement conditional ‘disable’ in razor code:

Asp .net mvc 3 CheckBoxFor method outputs hidden field, that hidden field value is false when checkbox is disabled with selected true

MVC 3: Conditionally Adding the Disabled Attribute with the HtmlHelpers

However these are not client side solutions.

Answer 1

If you want the data from your disabled checkboxes to be sent to the server, just set their state to enabled prior to your post. So, in jQuery, you could do something like this:

$("form").on("submit", function(e)
{
    $("input:checkbox").prop("disabled", false);
});

Answer 2

You could create a readOnly CSS class that you then apply to the checkboxes you need to make read only. Something like this...

.readOnly{
    pointer-events: none;
    color: #CCC000;
}

This would create the effect the checkbox is disabled, and not allow clicks, but still POST the value through the form.

Answer 3

EDIT: Although my answer seems a little hacky after seeing ZiNNED's nice workaround, it's still important to note why you're experiencing this issue.

---

This is because you're disabling ALL inputs in the div. What happens with checkboxes is two ipnuts are created. One is hidden. This is because if the checked attribute is not present, no data is sent to the server. The work around is our hidden input. This will always be present with a value of false, so that when a form posts with a checkbox that isn't checked, false is still sent to the server as the value of that checkbox.

To fix your issue, you need to target the checkbox input specifically. e.g.

 $('#' + divIdToDisable + ' input[type="checkbox"]').attr('disabled', true);

This will allow the false from the hidden input to still be posted. If you need to post true, you could just change the value of the hidden to true. e.g. (assuming only one checkbox per div)

 $('#' + divIdToDisable + ' input[type="hidden"]').val(true);

Answer 4

to disable

  $('#' + divIdToDisable + ' input').removeAttr("disabled");

to enable

 $('#' + divIdToDisable + ' input').attr("disabled", true);