jQueryで入力を無効/有効にしますか?

2342
omg 2009-09-12 19:21.
$input.disabled = true;

または

$input.disabled = "disabled";

標準的な方法はどれですか?そして、逆に、無効な入力をどのように有効にしますか?

16 answers

3872
gnarf 2009-09-12 19:23.

jQuery 1.6+

disabledプロパティを変更するには、.prop()関数を使用する必要があります。

$("input").prop('disabled', true); $("input").prop('disabled', false);

jQuery1.5以下

.prop()関数は存在しませんが、.attr()同様の機能を果たします。

無効な属性を設定します。

$("input").attr('disabled','disabled');

再度有効にするには、適切な方法は .removeAttr()

$("input").removeAttr('disabled');

jQueryのどのバージョンでも

常に実際のDOMオブジェクトに依存することができ、1つの要素のみを処理する場合は、おそらく他の2つのオプションよりも少し高速です。

// assuming an event handler thus 'this'
this.disabled = true;

.prop()or.attr()メソッドを使用する利点は、選択した一連のアイテムのプロパティを設定できることです。


注: 1.6であり.removeProp()のようにたくさんの音の方法removeAttr()、それは使用すべきではないようなネイティブの性質上'disabled'の文書からの抜粋:

注:このメソッドを使用して、checked、disabled、selectedなどのネイティブプロパティを削除しないでください。これにより、プロパティが完全に削除され、削除されると、要素に再度追加することはできません。代わりに、.prop()を使用してこれらのプロパティをfalseに設定します。

実際、このメソッドには多くの正当な使用法があるとは思えません。ブール小道具は、1.5の「属性」の対応物のように「削除」するのではなく、falseに設定する必要がある方法で実行されます。

62
geekbuntu 2012-07-19 01:51.

新しい慣習のためだけに&&今後適応可能にするため(ECMA6(????)で大幅に変更されない限り):

$(document).on('event_name', '#your_id', function() { $(this).removeAttr('disabled');
});

そして

$(document).off('event_name', '#your_id', function() { $(this).attr('disabled','disabled');   
});
34
Harini Sekar 2014-04-08 00:27.
    // Disable #x
    $( "#x" ).prop( "disabled", true ); // Enable #x $( "#x" ).prop( "disabled", false );

inputやtextareaなどのフォーム要素を無効/有効にする必要がある場合があります。Jqueryは、disabled属性を「disabled」に設定することでこれを簡単に行うのに役立ちます。例:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

無効化された要素を有効にするには、この要素から「disabled」属性を削除するか、その文字列を空にする必要があります。例:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

参照:http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html

14
Sajjad Shirazy 2014-09-07 04:53.
$("input")[0].disabled = true;

または

$("input")[0].disabled = false;
8
Nicu Surdu 2014-10-19 03:42.

これをコードのグローバルな場所に配置できます。

$.prototype.enable = function () { $.each(this, function (index, el) {
        $(el).removeAttr('disabled'); }); } $.prototype.disable = function () {
    $.each(this, function (index, el) { $(el).attr('disabled', 'disabled');
    });
}

そして、あなたは次のようなものを書くことができます:

$(".myInputs").enable(); $("#otherInput").disable();
7
daVe 2014-09-13 06:28.

現在の状態を反転したいだけの場合(トグルボタンの動作など):

$("input").prop('disabled', ! $("input").prop('disabled') );
5
wild coder 2018-08-03 00:59.

それらを使用して、任意の要素を有効/無効にできる方法はたくさんあります

アプローチ1

$("#txtName").attr("disabled", true);

アプローチ2

$("#txtName").attr("disabled", "disabled");

jQuery 1.7以降のバージョンを使用している場合は、attr()の代わりにprop()を使用してください。

$("#txtName").prop("disabled", "disabled");

要素を有効にしたい場合は、無効にするために行ったのとは逆の操作を行う必要があります。ただし、jQueryには、属性を削除する別の方法があります。

アプローチ1

$("#txtName").attr("disabled", false);

アプローチ2

$("#txtName").attr("disabled", "");

アプローチ3

$("#txtName").removeAttr("disabled");

繰り返しますが、jQuery 1.7以降のバージョンを使用している場合は、attr()の代わりにprop()を使用してください。そうです。これは、jQueryを使用して要素を有効または無効にする方法です。

2
Pawel 2018-02-12 08:29.

2018年の更新:

今そこにjQueryのは必要ません、それはしばらく以来となっていますdocument.querySelectordocument.querySelectorAll(複数の要素のために)$、加えて、より明確なものとほとんど同じ仕事をしますgetElementByIdgetElementsByClassNamegetElementsByTagName

「input-checkbox」クラスの1つのフィールドを無効にする

document.querySelector('.input-checkbox').disabled = true;

または複数の要素

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
2
SPARTAN 2018-08-03 00:26.

jQuery prop()メソッドを使用して、フォーム要素を無効または有効にしたり、jQueryを使用して動的に制御したりできます。prop()メソッドにはjQuery1.6以降が必要です。

例:

<script type="text/javascript">
        $(document).ready(function(){ $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){ if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false); } else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>
1
Tomer Ben David 2018-09-21 21:04.

無効にする:

$('input').attr('readonly', true); // Disable it. $('input').addClass('text-muted'); // Gray it out with bootstrap.

有効にする:

$('input').attr('readonly', false); // Enable it. $('input').removeClass('text-muted'); // Back to normal color with bootstrap.
1
Hasib Kamal 2017-12-20 06:33.

入力タイプに対してtrueを無効にします:

特定の入力タイプの場合(例:テキストタイプ入力

$("input[type=text]").attr('disabled', true);

すべてのタイプの入力タイプ

$("input").attr('disabled', true);
1
learnkevin 2019-02-23 03:50.

これは私のために働きます

$("#values:input").attr("disabled",true); $("#values:input").attr("disabled",false);
1
Abdus Salam Azad 2018-10-31 22:38.

このように使用して、

 $( "#id" ).prop( "disabled", true ); $( "#id" ).prop( "disabled", false );
0
Imants Volkovs 2017-11-17 00:24.

@gnarf answerを使用して、関数として追加しました

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

次に、このように使用します

$('#myElement').disable(true);
0
rap-2-h 2018-06-05 03:43.

2018、JQueryなし(ES6)

すべて無効にするinput

[...document.querySelectorAll('input')].map(e => e.disabled = true);

で無効にinputするid="my-input"

document.getElementById('my-input').disabled = true;

問題はJQueryに関するもので参考までにです。

0
Kamil Kiełczewski 2020-01-10 08:50.

アプローチ4(これはワイルドコーダーの回答の拡張です)

txtName.disabled=1     // 0 for enable
<input id="txtName">

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

DropMixはNFC対応のカードゲームで、基本的にはリミックスアーティストになります。現在、Amazonでは$ 30まで下がっており、これまでで最高の価格に匹敵します。ロックバンドで有名なHarmonixによって開発されたDropMixは、おそらく少し野心的すぎるように思われます。結局のところ、ほとんどの人は素晴らしいリズムを持っていませんが、ゲームは驚くほどうまく実行されます。

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

写真:APメアリーJ.ブライジは、間もなくハリウッドウォークオブフェイムのスターを獲得します。これは、メアリーJよりもハリウッドウォークオブフェイムのほうが正直なところ恩恵です。

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

画像:グラズ工科大学/ NataschaEiblがデザインしたロゴ。MeltdownとSpectreは、攻撃者がシステムメモリに保存されているあらゆる種類の情報にアクセスできるようにする2つの脆弱性に付けられた名前です。

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

日本人に襲われたときに真珠湾にいた97歳の第二次世界大戦のベテランが、ニューヨークのブルックリンから追い出されています。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language