如何使用CSS禁用表单字段？ [英] How do I disable form fields using CSS?

问题描述

是否可以使用CSS停用表单字段？我当然知道属性禁用，但是是否可以在CSS规则中指定此属性？类似 -

Is it possible to disable form fields using CSS? I of course know about the attribute disabled, but is it possible to specify this in a CSS rule? Something like -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

我问的原因是，我有一个应用程序，表单字段是自动生成的，字段基于一些规则（在Javascript中运行）被隐藏/显示。现在我想扩展它来支持禁用/启用字段，但是编写规则以直接操作表单字段的样式属性的方式。所以现在我必须扩展规则引擎来改变属性以及表单字段的样式，并且看起来不太理想。

The reason I'm asking is that, I have an application where the form fields are autogenerated, and fields are hidden/shown based on some rules (which run in Javascript). Now I want to extend it to support disabling/enabling fields, but the way the rules are written to directly manipulate the style properties of the form fields. So now I have to extend the rule engine to change attributes as well as style of form fields and somehow it seems less than ideal.

非常好奇，在CSS中显示属性，但不启用/禁用。在静态下工作的HTML5标准，甚至是非标准（浏览器特定），有什么喜欢它吗？

It's very curious that you have visible and display properties in CSS but not enable/disable. Is there anything like it in the still-under-works HTML5 standard, or even something non-standard (browser specific)?

推荐答案

由于规则是在JavaScript中运行的，为什么不使用javascript（或在我的示例中，jQuery）禁用它们？

Since the rules are running in JavaScript, why not disable them using javascript (or in my examples case, jQuery)?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

UPDATE

attr 函数不再是主要的方法，如下面的注释中所指出的。现在用 prop 函数完成。

The attr function is no longer the primary approach to this, as was pointed out in the comments below. This is now done with the prop function.

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

这篇关于如何使用CSS禁用表单字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！