视觉上禁用复选框，但允许它仍然提交其值

Posted 2023-05-08

【中文标题】视觉上禁用复选框，但允许它仍然提交其值

【英文标题】：Visually disable a checkbox but allow it to still submit its value

【发布时间】：2011-06-24 06:28:33

【问题描述】：

我有一个从其他选择更新的复选框，但向用户显示选中状态很重要。但是，我也希望它仅在功能上被读取，并在显示中以这种方式表示。

它工作正常 禁用复选框（提供灰色框以在视觉上帮助用户） 然而这意味着在提交 该值未保存。

相反，如果我设置复选框 只读它禁用 复选框，但仍然看起来像 普通复选框。

我有点想要每个，一个提交它的值但看起来像一个禁用的复选框并且仍然显示其检查状态的复选框......有人有什么想法吗？

【问题讨论】：

您究竟是如何将其设为只读的？因为readonly 属性不适用，或者至少不应该适用于复选框（w3.org/TR/html4/interact/forms.html#edef-INPUT，whatwg.org/specs/web-apps/current-work/multipage/…）。

我认为这个解决方案在这里也有帮助：***.com/questions/12769664/…

【参考方案1】：

使用隐藏字段<input type="hidden" />。使用您期望从复选框中获得的相同值填充隐藏。这样，视觉元素与数据元素是分开的，您不会有这些顾虑。

【参考方案2】：

作为一个简单的替代方案，是否可以添加一个包含您要存储的值的隐藏表单元素？使用这种方法，您可以获得禁用元素的功能，但仍然可以提交值。而且，您不必担心任何潜在的浏览器兼容性问题。

除此之外，在只读字段上，我认为您需要使用 CSS 将复选框设置为禁用字段。

【参考方案3】：

您可以在设置复选框值时设置隐藏输入字段，然后复选框将仅用于显示目的，实际值将通过隐藏输入字段提交。

【参考方案4】：

只需将其设为只读，给它一个特殊的类，然后在您的 CSS 中，您可以使其看起来就像它已被禁用。

【讨论】：

READONLY 不适用于复选框 ~ ***.com/questions/155291/…