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

Disable html input element by applying custom css class

本文关键字：html 输入 元素 应用 自定义 css      更新时间：2023-09-26

我想通过应用我的自定义 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");

.class

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

在不使用.attr（'disabled'， true）的情况下使用jQuery执行此操作的任何建议;？

无法仅使用 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);

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

pointer-events: none;

使用普通 CSS

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

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

你需要做两件事，那么为什么不把它们包装在一个函数中呢？您甚至可以创建一个小插件来执行此操作：

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

然后你可以这样称呼它：

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

。甚至将其与其他东西链接在一起，例如：

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

不能使用 css 属性禁用输入元素。但是您可以像以下方式改进当前的编码

 $('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");
相关文章：