web-dev-qa-db-ja.com

JQueryで入力を無効/有効にしますか？

$input.disabled = true;

または

$input.disabled = "disabled";

標準的な方法はどれですか？そして逆に、無効な入力を有効にするにはどうすればよいですか。

javascriptjqueryhtml-input
2099
omg

jQuery 1.6以上

disabledプロパティを変更するには .prop() 関数を使うべきです。

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

jQuery 1.5以下

.prop()関数は存在しませんが、 .attr() は同じように機能します。

Disabled属性を設定してください。

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

再度有効にするには、適切な方法は .removeAttr() を使用することです。

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

どのバージョンのjQueryでも

あなたはいつも実際のDOMオブジェクトに頼ることができます、そしてあなたが1つの要素だけを扱っているならばおそらく他の2つのオプションより少し速いです：

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

.prop()または.attr()メソッドを使用する利点は、選択した項目の束に対してプロパティを設定できることです。

注： 1.6では、.removeProp()のように聞こえる removeAttr() メソッドがありますが、 使用すべきではありません 'disabled'のようなネイティブプロパティではドキュメントからの抜粋：

注：checked、disabled、またはselectedなどのネイティブプロパティを削除するためにこのメソッドを使用しないでください。これはプロパティを完全に削除し、一度削除されると再びelementに追加することはできません。代わりに.prop（）を使用してこれらのプロパティをfalseに設定してください。

実際、このメソッドには多くの正当な用途があるとは思えません。ブール値の小道具は、1.5の "属性"のようにそれらを "削除"するのではなく、falseに設定する必要があります

3564
gnarf

新しい慣習のために、そして将来的にそれを適応可能にするために（ECMA6で劇的に変化しない限り（????）：

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

そして

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});
54
geekbuntu
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

入力やテキストエリアなどのフォーム要素を無効/有効にする必要がある場合があります。 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

30
Harini Sekar
$("input")[0].disabled = true;

または

$("input")[0].disabled = false;
13
Sajjad Shirazy

あなたのコードのどこかグローバルにこれを置くことができます：

$.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
Nicu Surdu

現在の状態を反転したいだけの場合（トグルボタンの動作のように）：

$("input").prop('disabled', ! $("input").prop('disabled') );
6
daVe

それらを使用する多くの方法がありますあなたは任意の要素を有効/無効にすることができます ：

アプローチ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を使用して任意の要素を有効または無効にする方法です。

3
wild coder

JQueryを使用して動的にフォーム要素またはコントロールを無効または有効にするには、jQueryのprop（）メソッドを使用します。 prop（）メソッドには、jQuery 1.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>
2
SPARTAN

2018用に更新：

document.querySelectorまたはdocument.querySelectorAll（複数の要素に対して）は$とほぼ同じ仕事をし、さらに明示的なものはgetElementById、getElementsByClassName、getElementsByTagNameです。

「入力チェックボックス」クラスの1つのフィールドを無効にする

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

または複数の要素

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
2
Pawel

無効にする：

$('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
Tomer Ben David

こんな感じで、

 $( "#id" ).prop( "disabled", true );

    $( "#id" ).prop( "disabled", false );
0
Abdus Salam Azad

これは私のために働く

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
0
learnkevin

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

特定の入力タイプの場合（ 例テキストタイプの入力 ）

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

全入力タイプ

$("input").attr('disabled', true);
0
Hasib Kamal

@gnarfという答えを使い、それを関数として追加しました

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

それからこのように使う

$('#myElement').disable(true);
0
Imants Volkovs

2018、JQueryなし（ES6）

すべてのinputを無効にします。

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

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

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

問題は with JQueryです。それはFYIです。

0
rap-2-h