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

Question

我们有几个 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

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

Answer 1

编辑：尽管在看到 ZiNNED 的不错的解决方法后我的回答似乎有点老套，但仍然重要的是要注意您遇到此问题的原因。

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

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

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

这将允许来自隐藏输入的 false 仍然被 posted。如果你需要 post true，你可以将 hidden 的值更改为 true。例如（假设每个 div 只有一个复选框）

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

Answer 2

禁用

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

启用

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

Answer 3

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

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

这会产生复选框被禁用的效果，并且不允许点击，但仍然 POST 通过表单的值。

Answer 4

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

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

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

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

html

checkbox

asp.net-mvc

jquery

readonly