javascript - 通过应用自定义 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; */
}    

在不使用 .attr('disabled', true); 的情况下使用 jquery 执行此操作的任何建议？

Answer 1

There is no way to disable an element with just CSS, but you can create a style that will be applied to disabled elements:

<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/

(Of course, the :disabled CSS selector isn't supported in old browsers.)

Note that if you're using jQuery version >= 1.6 you should use .prop() instead of .attr() to change the disabled state.

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);

Answer 2

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

pointer-events: none;

Answer 3

使用普通 CSS

.disabled{
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

Answer 4

不，CSS 不能禁用输入元素。CSS仅用于样式，它不能做任何其他事情。此外，输入仅适用于输入，不要忘记选择、文本区域、密码

Answer 5

您需要做两件事，那么为什么不将它们包装在一个函数中呢？你甚至可以创建一个小插件来做到这一点：

(function ($) {
    $.fn.disableInput = function () {
        return this.each(function(){
            $(this).prop('disabled');
            $(this).addClass('disabled', true);            
        });

    }
})(jQuery);

然后你可以这样称呼它：

$('#myInput').disableInput();

...甚至将其与其他东西链接起来，例如：

$('#myInput').disableInput().addClass('otherClass');​

Answer 6

You can't disable input elements using css properties. But you can improve your current coding like following

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