通过应用自定义css类禁用html输入元素

Question

我想通过应用我的自定义css类来禁用div的所有输入元素.但我找不到任何可以禁用输入元素的css属性.目前我在做什么

  $('#div_sercvice_detail :input').attr('disabled', true);
 $('#retention_interval_div :input').addClass("disabled"); 

可以使用css attr禁用div的所有输入元素,但我想应用我的自定义类来禁用所有带有一些额外css属性的输入

 $('#retention_interval_div :input').addClass("disabled");

类

.disabled{
color : darkGray;
font-style: italic;
/*property for disable input element like*/
/*disabled:true; */
}    

任何使用jquery执行此操作的建议,而不使用.attr('disabled',true);?

Answer 1

无法仅使用CSS禁用元素,但您可以创建将应用于禁用元素的样式:

<style>
#retention_interval_div?? input[type="text"]:disabled { 
    color : darkGray;
    font-style: italic;
}?
</style>

然后在你的代码中你只需要说:

 $('#retention_interval_div :input').prop("disabled", true);

演示:http://jsfiddle.net/nnnnnn/DhgMq/

(当然,:disabled旧浏览器不支持CSS选择器.)

请注意,如果您使用的是jQuery版本> = 1.6,则应使用.prop()而不是.attr()更改禁用状态.

您显示的代码不会禁用它应用类的相同元素 - 选择器是不同的.如果这只是一个错字,那么你可以将它简化为一行:

$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);

Answer 2

您可以使用以下 css 来实际禁用输入：

pointer-events: none;