Javascript 通过应用自定义 css 类禁用 html 输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11863499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable html input element by applying custom css class
提问by Ashish Panery
I want to disable my all input element of a div by applying my custom css class. but i could not find any css attribute which can disable an input element. currently what am i doing
我想通过应用我的自定义 css 类来禁用 div 的所有输入元素。但我找不到任何可以禁用输入元素的 css 属性。目前我在做什么
$('#div_sercvice_detail :input').attr('disabled', true);
$('#retention_interval_div :input').addClass("disabled");
which can disable all input element of div with css attr but i want to apply my custom class for disable all input with some extra css attributes
它可以使用 css attr 禁用 div 的所有输入元素，但我想应用我的自定义类来禁用具有一些额外 css 属性的所有输入
$('#retention_interval_div :input').addClass("disabled");
class
班级
.disabled{
color : darkGray;
font-style: italic;
/*property for disable input element like*/
/*disabled:true; */
}
any suggestion for doing this with jquery without using .attr('disabled', true);?
在不使用 .attr('disabled', true); 的情况下使用 jquery 执行此操作的任何建议？
回答by nnnnnn
There is no way to disable an element with just CSS, but you can create a style that will be applied to disabled elements:
无法仅使用 CSS 禁用元素，但您可以创建将应用于禁用元素的样式：
<style>
#retention_interval_div?? input[type="text"]:disabled {
color : darkGray;
font-style: italic;
}?
</style>
Then in your code you just have to say:
然后在你的代码中你只需要说：
$('#retention_interval_div :input').prop("disabled", true);
Demo: http://jsfiddle.net/nnnnnn/DhgMq/
演示：http: //jsfiddle.net/nnnnnn/DhgMq/
(Of course, the :disabledCSS selector isn't supported in old browsers.)
（当然，:disabled旧浏览器不支持 CSS 选择器。）
Note that if you're using jQuery version >= 1.6 you should use .prop()instead of .attr()to change the disabled state.
请注意，如果您使用 jQuery 版本 >= 1.6，则应使用.prop()而不是.attr()更改禁用状态。
The code you showed is not disabling the same elements that it applies the class to - the selectors are different. If that's just a typo then you can simplify it to one line:
您显示的代码并未禁用将类应用于的相同元素 - 选择器不同。如果这只是一个错字，那么您可以将其简化为一行：
$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);
回答by Gareth Parker
No. CSS can't disable an input element. CSS is for styling only, it can't do anything else. Also, input will only work with input, don't forget select, textarea, password
不可以。CSS 不能禁用输入元素。CSS 仅用于样式，它不能做任何其他事情。此外，输入仅适用于输入，不要忘记选择、文本区域、密码
回答by Emircan
You can use following css to practically disable the input:
您可以使用以下 css 实际上禁用输入：
pointer-events: none;
回答by Faust
You need to do 2 things, so why not wrap them in a single function? You could even create a little plugin to do this:
您需要做两件事，那么为什么不将它们包装在一个函数中呢？你甚至可以创建一个小插件来做到这一点：
(function ($) {
$.fn.disableInput = function () {
return this.each(function(){
$(this).prop('disabled');
$(this).addClass('disabled', true);
});
}
})(jQuery);
Then you can call it like this:
然后你可以这样称呼它：
$('#myInput').disableInput();
...and even chain it with other stuff, like this:
...甚至将它与其他东西链接起来，如下所示：
$('#myInput').disableInput().addClass('otherClass');?
回答by Nick
You can't disable input elements using css properties. But you can improve your current coding like following
您不能使用 css 属性禁用输入元素。但是您可以改进您当前的编码，如下所示
$('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");
回答by Yallaling Goudar
Using normal CSS
使用普通 CSS
.disabled{
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
