Wie deaktiviere ich die HTML-Schaltfläche mit JavaScript?

Ich habe gelesen, dass Sie eine HTML-Schaltfläche deaktivieren (physisch nicht anklickbar machen) können, indem Sie sie einfach disablewie folgt an ihr Tag anhängen , jedoch nicht als Attribut:

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

Da diese Einstellung kein Attribut ist, wie kann ich sie dynamisch über JavaScript hinzufügen, um eine zuvor aktivierte Schaltfläche zu deaktivieren?

Da diese Einstellung kein Attribut ist

Es ist ein Attribut.

Einige Attribute sind als boolesch definiert, dh Sie können ihren Wert angeben und alles andere weglassen. dh anstelle von disabled = " disabled " fügen Sie nur den fett gedruckten Teil ein. In HTML 4, Sie sollten nur den fettgedruckten Teil enthalten , wie die Vollversion als markiert ist ein Feature mit begrenzten Unterstützung (auch wenn das weniger wahr ist jetzt dann , wenn die Spezifikation geschrieben wurde).

Ab HTML 5 haben sich die Regeln geändert und jetzt geben Sie nur den Namen und nicht den Wert an. Dies macht praktisch keinen Unterschied, da der Name und der Wert gleich sind.

Die DOM-Eigenschaft wird auch aufgerufen disabledund ist ein Boolescher Wert, der trueoder annimmt false.

foo.disabled = true;

Theoretisch können Sie auch foo.setAttribute('disabled', 'disabled');und foo.removeAttribute("disabled"), aber ich würde dies nicht mit älteren Versionen von Internet Explorer vertrauen (die notorisch fehlerhaft sind, wenn es darum geht setAttribute).

Etwas deaktivieren

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

ermöglichen

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

Es ist ein Attribut, aber ein boolesches (es braucht also keinen Namen, nur einen Wert - ich weiß, es ist komisch). Sie können das Eigenschaftsäquivalent in Javascript festlegen:

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

Versuche Folgendes:

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

Der offizielle Weg, um das disabledAttribut auf ein zu setzen, HTMLInputElementist folgender:

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

Während @ kaushar Antwort zum Aktivieren und Deaktivieren eine ausreichend ist HTMLInputElement, und ist wahrscheinlich vorzuziehen , für die Kompatibilität Cross-Browser aufgrund IE ist historisch Buggy setAttribute, es funktioniert nur , weil ElementEigenschaften Schatten ElementAttribute. Wenn eine Eigenschaft festgelegt ist, verwendet das DOM standardmäßig den Wert der Eigenschaft anstelle des Werts des entsprechenden Attributs.

Es gibt einen sehr wichtigen Unterschied zwischen Eigenschaften und Attributen. Ein Beispiel für eine echte HTMLInputElement Eigenschaft ist input.value, und im Folgenden wird gezeigt, wie das Abschatten funktioniert:

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" />

Das bedeutet, dass Eigenschaften Schattenattribute sind. Dieses Konzept gilt auch für geerbte Eigenschaften in der prototypeKette:

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

Ich hoffe, dies klärt Verwirrung über den Unterschied zwischen Eigenschaften und Attributen.

Es ist immer noch ein Attribut. Einstellen auf:

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

... ist gültig.

Wenn Sie das Schaltflächenobjekt mit dem Namen b haben: b.disabled=false;

Ich denke, der beste Weg könnte sein:

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

Es funktioniert gut Cross-Browser.

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

Sie können weiterhin ein Attribut verwenden. Verwenden Sie einfach das Attribut 'disabled' anstelle von 'value'.