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

【问题标题】：Disable html input element by applying custom css class通过应用自定义 css 类禁用 html 输入元素
【发布时间】：2012-08-05 12:04:13
【问题描述】：

我想通过应用我的自定义 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 执行此操作？

【问题讨论】：

好吧，.prop('disabled',true) 是您应该使用当前版本的 jQuery 的方式 - 它满足您对避免使用 .attr() 方法的要求。跨度>
+1 为 .prop('disabled', true)
没有 CSS 属性可以指定 disabled。 jQuery 的.prop() 是更好的方法。虽然我假设你想避免这种情况以及attr()。请问为什么？
你不能只用 CSS 来禁用一个元素，但是你可以接受你之前在这里发布的 8 个问题的答案。
How do I disable form fields using CSS? 的可能重复项

标签： javascript jquery html css

【解决方案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);

【讨论】：

【解决方案2】：

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

pointer-events: none;

【讨论】：

【解决方案3】：

没有。 CSS 不能禁用输入元素。 CSS仅用于样式，它不能做任何其他事情。另外，input 只能和 input 一起使用，别忘了 select、textarea、password

【讨论】：

:input selector 基本上选择所有表单控件，而不仅仅是<input type="text">。

【解决方案4】：

使用普通的 CSS

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

【讨论】：

【解决方案5】：

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

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

    }
})(jQuery);

那么你可以这样称呼它：

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

...甚至将它与其他东西链接起来，像这样：

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

【讨论】：

注意你不需要.each()，你可以说this.prop().addClass()。
你的意思不是$(this).prop('disabled', true); 无论如何，你不希望 disableInput() 有一个真/假参数吗？

【解决方案6】：

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

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

【讨论】：