如何使某些复选框看起来好像已禁用



我应该设置输入标记的哪个属性来组成下面的复选框,看起来好像它被禁用了。

<input type="checkbox" name="selectedUsers" value="gng"  />

然而,我不想使用"disabled"属性来真正禁用它,因为我希望它的值提交到web服务器。

更多详细信息:

<input type="checkbox" name="selectedUsers" value="user1"  />
<input type="checkbox" name="selectedUsers" value="user2"  />
<input type="checkbox" name="selectedUsers" value="user3"  />

我有一个用户列表和复选框来指示它是否具有编辑器角色。系统允许管理员通过选中复选框并点击"确认"按钮来更改用户的角色。然后,Web服务器将检查变量"selectedUsers",以查看检查的用户列表,并与数据库中用户的角色值进行比较。若服务器发现了差异,它将执行适当的操作,从数据库表中删除或添加该用户的编辑器角色。

例如,user1不在变量"selectedUsers"上,但在数据库表中,它有这个角色,所以系统理解管理员想要删除该用户的编辑器角色,反之亦然。

然而,有些用户已经是管理员用户,因此我不允许其他管理员更改这些用户的角色,只能查看其角色。因此,我希望这些管理员用户的复选框显示为禁用。我不能使用:disabled="disabled",因为如果我真的禁用了复选框,则该复选框的用户总是从变量"selectedUsers"中排除。

5小时后更新:

我可以将UI更改为不允许客户端修改复选框,如下所示。客户端可以单击复选框,但复选框不会更改其值。

<input type="checkbox" name="selectedUsers" value="amdin1" onclick="return false" onkeydown="return false" />

目前的问题是找到一种方法来指示客户网站不希望他们选中/取消选中复选框。这样,我希望这个复选框看起来是不可变的(通过改变背景颜色…)

如果您希望复选框显示为禁用,但同时希望发送其内容,则可以创建一个具有适当名称和值的<input type=hidden .../>字段并禁用该复选框。

如果复选框值或状态是动态更改的,那么我们可以依赖浏览器脚本支持(否则值/状态更改将不起作用),并在更改复选框状态的同一位置更改隐藏字段值。

对于您更新的问题,您在这里做出了错误的决定。

不允许一个用户编辑其他用户的访问权限是业务逻辑。通过"禁用"复选框来实现它就像只通过"禁止通行"标志来阻止囚犯逃跑一样

出于安全考虑,必须在服务器端执行适当的检查(即,检查当前用户不允许管理的用户的访问权限是否未更改)。这是要做的第一件事情。

此外,您可能希望实现您的UI,以便用户更方便(也就是在安全检查点之前的"请勿通过"标志)。最好的解决方案是简单地禁用复选框。这样一个解决方案不会发送禁用复选框值的特性不应该困扰您,因为您已经应该忽略服务器端此类用户的任何值。

这是不可能的:原生的"禁用"外观是由浏览器呈现的,通常无法通过CSS样式实现。

我能看到的唯一解决方法是

  • 将复选框设置为disabled="disabled"

  • 使用JavaScript,在表单发送时启用它

当然,这只有在启用JavaScript的情况下才能工作,所以它不是无懈可击的。也许最好重新思考一下你想要实现的目标。

最新更新