JavaScriptを使用して無効化された属性を入力要素に追加する

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

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

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

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

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

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

$("input").attr("disabled", true); 現在...もう分からない。

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

最初はいつも.attr()だったし、それはいつも.prop()だったので、私はここに戻って答えを更新し、より正確にした。

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

要するに、現時点では、これは最良の答えです。「両方を使用できますが、状況によって異なります。」

代わりにこの回答を読む必要があります：https : //stackoverflow.com/a/5876747/257493

そして、その変更に関する彼らのリリースノートはここに含まれています：

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

優先使用法の要約

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

または言い換えれば：

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

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

... ...

ここで、APIの安定性に関するレッスンを学んでください。

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

HTML WORLD

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

JS WORLD

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

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



//remove it
from.removeAttr("disabled");

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);

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

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

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';
          });
});

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

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

質問はJSでこれを行う方法を尋ねていたので、私はバニラJSの実装を提供しています。

var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
  element.disabled = "disabled";
}