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

Question

我有一个从其他选项更新的复选框，但向用户显示已检查状态非常重要。但是我也希望它只能在功能中读取，并在显示中表示。

• 它工作正常 禁用复选框（提供灰色框以便直观地帮助用户） 但这意味着在提交时 该值未保存。

• 相反，如果我设置复选框 只读它会禁用 复选框但仍然显示为 正常的复选框。

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

Answer 1

使用隐藏字段<input type="hidden" />。使用您希望从复选框中获得的相同值填充隐藏。通过这种方式，可视元素与数据元素分离，您将不会遇到这些问题。

Answer 2

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

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

Answer 3

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

Answer 4

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