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

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

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

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

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

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language