6

カスタムcssクラスを適用して、divのすべての入力要素を無効にしたい。しかし、入力要素を無効にすることができるcss属性が見つかりませんでした。現在私は何をしていますか

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

これはcssattrで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でこれを行うための提案はありますか？

4

6 に答える 6

10

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/

（もちろん、:disabledCSSセレクターは古いブラウザーではサポートされていません。）

jQueryバージョン>=1.6を使用している場合は、無効状態を変更する.prop()代わりにを使用する必要があることに注意してください。.attr()

あなたが示したコードは、クラスを適用するのと同じ要素を無効にしていません-セレクターは異なります。それが単なるタイプミスの場合は、1行に簡略化できます。

$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);
于 2012-08-08T11:39:13.807 に答える
5

次のcssを使用して、入力を実質的に無効にすることができます。

pointer-events: none;
于 2018-03-30T07:20:20.127 に答える
3

通常のCSSを使用する

.disabled{
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
于 2019-11-14T08:57:07.813 に答える
2

いいえ。CSSは入力要素を無効にすることはできません。CSSはスタイリング専用であり、他のことはできません。また、入力は入力でのみ機能します。select、textarea、passwordを忘れないでください

于 2012-08-08T11:32:34.173 に答える
1

2つのことを行う必要があるので、それらを1つの関数にラップしてみませんか？これを行うための小さなプラグインを作成することもできます。

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

    }
})(jQuery);

次に、次のように呼び出すことができます。

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

...そして、次のような他のものとチェーンすることさえできます：

$('#myInput').disableInput().addClass('otherClass');​
于 2012-08-08T11:45:12.943 に答える
0

cssプロパティを使用して入力要素を無効にすることはできません。ただし、次のように現在のコーディングを改善できます

 $('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");
于 2012-08-08T11:36:57.167 に答える