JavaScriptを使用してHTMLボタンを無効にする方法は？

disable次のように、属性としてではなく、タグに追加するだけでHTMLボタンを無効にする（物理的にクリックできないようにする）ことができると読みました。

<input type="button" name=myButton value="disable" disabled>

この設定は属性ではないので、JavaScriptを介して動的に追加して、以前に有効になっていたボタンを無効にする方法を教えてください。

この設定は属性ではないため

属性です。

一部の属性はブール値として定義されています。つまり、それらの値を指定して、他はすべて省略することができます。つまり、disabled = " disabled "の代わりに、太字の部分のみを含めます。HTML 4では、フルバージョンはサポートが限定された機能としてマークされているため、太字の部分のみを含める必要があります（ただし、仕様が作成された時点では、それほど正確ではありません）。

HTML 5以降、ルールが変更され、名前ではなく値のみが含まれるようになりました。名前と値は同じであるため、実際には違いはありません。

DOMプロパティはとも呼ばれるdisabledと取るブールですtrueかfalse。

foo.disabled = true;

理論的には、foo.setAttribute('disabled', 'disabled');ともできますがfoo.removeAttribute("disabled")、古いバージョンのInternet Explorer（これは、に関してはバグが多いことで有名setAttributeです）では信頼できません。

無効にする

document.getElementById("btnPlaceOrder").disabled = true; 

有効にする

document.getElementById("btnPlaceOrder").disabled = false; 

これは属性ですが、ブール値です（つまり、名前は必要なく、値だけが必要です-変です）。JavaScriptで同等のプロパティを設定できます。

document.getElementsByName("myButton")[0].disabled = true;

以下を試してください：

document.getElementById("id").setAttribute("disabled", "disabled");

にdisabled属性を設定する公式の方法HTMLInputElementはこれです：

var input = document.querySelector('[name="myButton"]');
// Without querySelector API
// var input = document.getElementsByName('myButton').item(0);

// disable
input.setAttribute('disabled', true);
// enable
input.removeAttribute('disabled');

一方で@ kausharの答えは、有効化および無効化のために十分でありHTMLInputElement、そしておそらくIEのクロスブラウザの互換性のために好ましく、歴史的にバギーだsetAttribute、それが唯一の理由は動作しますが、Elementプロパティの影のElement属性を。プロパティが設定されている場合、DOMは同等の属性の値ではなく、デフォルトでプロパティの値を使用します。

プロパティと属性の間には非常に重要な違いがあります。true HTMLInputElement プロパティの例はinput.valueであり、以下はシャドウイングがどのように機能するかを示しています。

var input = document.querySelector('#test');

// the attribute works as expected
console.log('old attribute:', input.getAttribute('value'));
// the property is equal to the attribute when the property is not explicitly set
console.log('old property:', input.value);

// change the input's value property
input.value = "My New Value";

// the attribute remains there because it still exists in the DOM markup
console.log('new attribute:', input.getAttribute('value'));
// but the property is equal to the set value due to the shadowing effect
console.log('new property:', input.value);

<input id="test" type="text" value="Hello World" />

これが、プロパティが属性をシャドウしていると言うことです。この概念は、prototypeチェーン上の継承されたプロパティにも適用されます。

function Parent() {
  this.property = 'ParentInstance';
}

Parent.prototype.property = 'ParentPrototype';

// ES5 inheritance
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

function Child() {
  // ES5 super()
  Parent.call(this);

  this.property = 'ChildInstance';
}

Child.prototype.property = 'ChildPrototype';

logChain('new Parent()');

log('-------------------------------');
logChain('Object.create(Parent.prototype)');

log('-----------');
logChain('new Child()');

log('------------------------------');
logChain('Object.create(Child.prototype)');

// below is for demonstration purposes
// don't ever actually use document.write(), eval(), or access __proto__
function log(value) {
  document.write(`<pre>${value}</pre>`);
}

function logChain(code) {
  log(code);

  var object = eval(code);

  do {
    log(`${object.constructor.name} ${object instanceof object.constructor ? 'instance' : 'prototype'} property: ${JSON.stringify(object.property)}`);
    
    object = object.__proto__;
  } while (object !== null);
}

これにより、プロパティと属性の違いに関する混乱が明らかになることを願っています。

それはまだ属性です。次のように設定します。

<input type="button" name=myButton value="disable" disabled="disabled">

...は有効です。

bという名前のボタンオブジェクトがある場合： b.disabled=false;

私は最良の方法は次のようになると思います：

$("#ctl00_ContentPlaceHolder1_btnPlaceOrder").attr('disabled', true);

クロスブラウザで正常に動作します。

<button disabled=true>text here</button>

属性は引き続き使用できます。「値」の代わりに「無効」属性を使用するだけです。