Как отключить кнопку 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свойства shadowElement атрибутов . Если свойство установлено, то 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>

Вы все еще можете использовать атрибут. Просто используйте атрибут «disabled» вместо «value».