Как отключить кнопку HTML с помощью JavaScript?



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



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


поскольку этот параметр не является атрибутом, как я могу добавить его динамически через JavaScript, чтобы отключить кнопку, которая была ранее включена?

530   9  

9 ответов:

так как этот параметр не является атрибутом

это атрибут.

некоторые атрибуты определяются как логические, что означает, что вы можете указать их значение и оставить все остальное. т. е. вместо disabled="отключен", вы включаете только жирную часть. В HTML 4, Вы должны включить только жирную часть, поскольку полная версия помечена как функция с ограниченной поддержкой (хотя это менее актуально теперь, когда спецификация была написана).

начиная с HTML 5, правила изменились, и теперь вы включаете только имя, а не значение. Это не имеет никакого практического значения, потому что имя и значение совпадают.

The DOM property называют 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");

официальный способ установить на 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);
}

Я надеюсь, что это проясняет любую путаницу в отношении разницы между свойствами и атрибутами.

если у вас есть объект button, называемый b:b.disabled=false;

это все еще атрибут. Установка его в:

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

... является действительным.

Я думаю, что лучший способ может быть:

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

Он работает кросс-браузер.

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

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

Comments

    Ничего не найдено.