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

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

阶级

---

对于不使用.attr（'disabled'，true）；，而使用jquery执行此操作，有何建议

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

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

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

---

无法仅使用CSS禁用元素，但您可以创建一种样式，该样式将应用于禁用的元素：

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

演示：

（当然，旧浏览器不支持

：disabled

CSS选择器。）

请注意，如果使用jQuery version>=1.6，则应使用

.prop（）

而不是

.attr（）

来更改禁用状态

您显示的代码并没有禁用它应用于类的相同元素-选择器是不同的。如果这只是一个输入错误，那么您可以将其简化为一行：

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

---

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

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

    }
})(jQuery);

然后你可以这样称呼它：

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

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

…甚至把它和其他东西连在一起，比如：

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

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

---

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

pointer-events: none;

使用普通CSS

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

---

好的，

.prop（'disabled'，true）

是使用当前版本的jQuery应该做的事情-它满足了您对避免

.attr（）

方法的要求。+1对于.prop（'disabled'，true），没有CSS属性来指定

disabled

。jQuery的

.prop（）

是更好的方法。尽管我假设您希望避免这种情况，也希望

attr（）

。我可以问一下原因吗？您不能仅使用CSS禁用一个元素，但您可以接受您在此处发布的前8个问题的答案。基本上可以选择所有表单控件，而不仅仅是

。请注意，您不需要

。each（）

，您可以说

this.prop（）.addClass（）

。你是说

$（this）.prop（'disabled'，true）