通過應用自定義 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

無法僅使用 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);

Answer 2

您可以使用以下 css 實際上禁用輸入：

pointer-events: none;

Answer 3

不可以。CSS 不能禁用輸入元素。 CSS 僅用於樣式，它不能做任何其他事情。 此外，輸入僅適用於輸入，不要忘記選擇、文本區域、密碼

Answer 4

使用普通 CSS

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

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

您不能使用 css 屬性禁用輸入元素。 但是您可以改進您當前的編碼，如下所示

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