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

Question

$input.disabled = true;

また

$input.disabled = "disabled";

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

Answer 1

jQuery 1.6+

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

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

jQuery 1.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()またはメソッドを使用する利点.attr()は、選択したアイテムの束に対してプロパティを設定できることです。

---

注: 1.6 には によく似た.removeProp()メソッドがあります が、ドキュメントからの抜粋のようなネイティブ プロパティでは使用しないremoveAttr()でください。'disabled'

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

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

Answer 2

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

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

と

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

Answer 3

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

また

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

Answer 4

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

$.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();

Answer 5

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

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

Answer 6

jQuery モバイルの場合:

無効にする

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

有効にする

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');