如何使一些复选框看起来好像被禁用了

时间:2012-03-02 09:22:20

标签: html css web

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

<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 =“已禁用”,因为如果我确实禁用了复选框,则此复选框的用户始终将从变量“selectedUsers”中排除。

5小时后更新:

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

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

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

3 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

这是不可能的:浏览器呈现本机“禁用”外观,通常无法通过CSS样式实现。

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

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

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

这当然只有在启用JavaScript时才有效,所以它不是不漏水的。最好重新考虑一下你想要达到的目标。

答案 2 :(得分:2)

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

禁止一个用户编辑其他一些用户访问权限是业务逻辑。通过“禁用”复选框来实现它就像防止囚犯只通过“不通过”标志逃脱。

为了安全起见,必须在服务器端执行相应的检查(即,检查没有为当前用户不允许管理的用户更改访问权限)。这是第一个要做的事情。

另外,您可能希望实现用户界面,以便用户更方便(在安全检查点之前也称为“不通过”标志)。最好的解决方案是简单地禁用复选框。这种解决方案的特点是它不会发送禁用的复选框值不应该打扰你,因为你已经应该忽略服务器端这些用户的任何值。