web-dev-qa-db-ja.com

JavaScriptを使用して入力要素に無効属性を追加します

入力ボックスがあり、それを無効にし、同時にフォームを移植する際の問題を回避するために非表示にする必要があります。

これまでのところ、入力を非表示にする次のコードがあります。

$(".shownextrow").click(function() { 
    $(this).closest("tr").next().show().find('.longboxsmall').hide();
});

これは、結果として非表示になる入力です。

<input class="longboxsmall" type="text" />

無効な属性を入力に追加するにはどうすればよいですか？

javascriptjqueryinputonclick
116
user342391

$("input").attr("disabled", true);現在...もうわかりません。

2013年12月です。何を伝えればいいのかわかりません。

最初は常に.attr()、次に常に.prop()だったので、ここに戻って答えを更新し、より正確にしました。

それから1年後、jQueryは再び考えを変えました。これを追跡したくはありません。

要するに、現時点では、これが最良の答えです。「両方を使用できますが、それは依存します。」

代わりにこの回答をお読みください： https://stackoverflow.com/a/5876747/25749

また、その変更に関するリリースノートは次のとおりです。

.attr（）も.prop（）も値の取得/設定に使用しないでください。代わりに.val（）メソッドを使用してください（ただし、.attr（ "value"、 "somevalue"）を使用しても、1.6以前と同様に機能します）。

優先使用の要約

.prop（）メソッドは、ブール属性/プロパティ、およびHTMLに存在しないプロパティ（window.locationなど）に使用する必要があります。他のすべての属性（htmlで確認できる属性）は、.attr（）メソッドで引き続き操作できます。

または言い換えると：

「.prop =ドキュメント以外のもの」

".attr" =ドキュメントのもの

... ...

APIの安定性に関するレッスンをここで学べますように...

265
Incognito

私のソースからの作業コード：

HTML WORLD

<select name="select_from" disabled>...</select>

JSワールド

var from = jQuery('select[name=select_from]');

//add disabled
from.attr('disabled', 'disabled');



//remove it
from.removeAttr("disabled");
43
Mircea Stanciu

JQueryを使用している場合、disabled属性を設定する方法はいくつかあります。

var $element = $(...);
    $element.prop('disabled', true);
    $element.attr('disabled', true); 

    // The following do not require jQuery
    $element.get(0).disabled = true;
    $element.get(0).setAttribute('disabled', true);
    $element[0].disabled = true;
    $element[0].setAttribute('disabled', true);
12
iConnor

DOM要素を取得して、disabledプロパティを直接設定できます。

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').hide()[0].disabled = 'disabled';
});

または、複数ある場合は、each()を使用してすべてを設定できます。

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() {
               this.style.display = 'none';
               this.disabled = 'disabled';
          });
});
11
user113716
$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

上記はすべて完全に有効なソリューションです。ニーズに最適なものを選択してください。

8
DJSpud

JQueryのattr()メソッドを使用するだけです

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');
5
Gabe