Як відключити кнопку HTML за допомогою JavaScript?

Я читав, що ви можете відключити (зробити фізичне не натискання) кнопку HTML просто додавши disableдо її тегу, але не як атрибут, як описано нижче:

<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 використовує значення властивості за замовчуванням, а не значення еквівалентного атрибута.

Існує дуже важлива різниця між властивостями та атрибутами. Приклад справжнього 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>

Ви все ще можете використовувати атрибут. Просто використовуйте атрибут "вимкнено" замість "значення".