在客户端将 MVC 复选框设置为只读（或禁用）答案

【问题标题】：Set MVC checkbox to readonly (or disabled) on client-side在客户端将 MVC 复选框设置为只读（或禁用）
【发布时间】：2017-03-01 06:25:27
【问题描述】：

我们有几个 MVC 复选框，例如：

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

我们有条件客户端代码需要将 div 中的所有控件设置为只读（包括这些复选框）：

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

我们了解到 readonly 不能在复选框上正常工作（见下文）。

我尝试了以下方法，但这会导致在“保存”期间没有数据回传（另见下文）：

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

这似乎是一个常见问题，但在我的所有研究中，我都没有找到一个好的客户端解决方案。

这是我的研究：

只读复选框并不总是适用于所有浏览器：

Can HTML checkboxes be set to readonly?

How can I make a checkbox readonly? not disabled?

对 MVC 使用“禁用”会导致没有值被回发：

Html.CheckBox returns false if disabled, even if seleced

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

可以在剃须刀代码中实现条件“禁用”：

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

但是，这些不是客户端解决方案。

【问题讨论】：

你为什么要使用这个客户端？为什么不是服务器端？
复选框并非按照您想要的方式工作。您是否可以使用单选按钮？
@Arendsen：有很多现有代码需要更改
@MisterPositive：这可能是一个可行的解决方案。但是单选框在 MVC 的“禁用”问题上不相似吗？

标签： jquery html asp.net-mvc checkbox readonly

【解决方案1】：

编辑：虽然在看到 ZiNNED 的好解决方法后我的回答似乎有点生硬，但请注意您遇到此问题的原因仍然很重要。

这是因为您在 div 中禁用了 ALL 输入。复选框会发生两个 ipnuts 被创建。一个是隐藏的。这是因为如果checked 属性不存在，则不会向服务器发送任何数据。解决方法是我们隐藏的输入。这将始终以 false 值出现，因此当表单发布时带有未选中的复选框，false 仍会作为该复选框的值发送到服务器。

要解决您的问题，您需要专门针对复选框输入。例如

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

这将允许隐藏输入中的错误仍然被发布。如果您需要发布 true，您只需将 hidden 的值更改为 true。例如（假设每个 div 只有一个复选框）

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

【讨论】：

【解决方案2】：

禁用

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

启用

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

【讨论】：

【解决方案3】：

您可以创建一个readOnly CSS 类，然后将其应用于需要设为只读的复选框。像这样的……

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

这将创建复选框被禁用的效果，并且不允许点击，但仍然通过表单发布值。

【讨论】：

【解决方案4】：

如果您希望将已禁用复选框中的数据发送到服务器，只需在发布之前将其状态设置为 enabled。所以，在 jQuery 中，你可以这样做：

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

【讨论】：