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

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

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

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

我们了解到，readonly在复选框上无法正常工作（见下文）

我尝试了以下方法，但这会导致在“保存”过程中不会发回任何数据（另请参见下文）：

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

---

以下是我的研究：

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

对MVC使用“disabled”（已禁用）不会导致任何值被发回：

可以在razor代码中实现有条件的“禁用”：

---

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

编辑：虽然我的回答在看到Zined的好的解决方法后似乎有点不对劲，但仍然需要注意为什么会遇到这个问题

---

这是因为您正在禁用div中的所有输入。复选框的作用是创建两个ipnut。一个是隐藏的。这是因为如果

checked

属性不存在，则不会向服务器发送任何数据。解决方案是我们隐藏的输入。这将始终显示为false值，因此当表单使用未选中的复选框发布时，false仍然作为该复选框的值发送到服务器

要解决问题，您需要专门针对复选框输入。e、 g

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

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

禁用

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

使能

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

---

您可以创建一个

readOnly

CSS类，然后将其应用于需要设置为只读的复选框。像这样的

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

---

这将产生禁用复选框的效果，不允许单击，但仍通过表单发布值。

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

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

---

为什么要使用这个客户端？为什么不在服务器端？复选框不是按您想要的方式设计的。您可以改为使用单选按钮吗？@Arendsen：有很多现有代码需要修改change@MisterPositive：那可能是一个可行的解决办法。但是，在MVC“禁用”问题上，广播框不是很相似吗？

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

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

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