Как отключить кнопку HTML с помощью JavaScript?
Я читал, что вы можете отключить (сделать физически unclickable) кнопку HTML, просто добавив disable к его тегу, но не как атрибут, следующим образом:
<input type="button" name=myButton value="disable" disabled>
поскольку этот параметр не является атрибутом, как я могу добавить его динамически через JavaScript, чтобы отключить кнопку, которая была ранее включена?
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;
официальный способ установить на
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, и, вероятно, предпочтительнее для кросс-браузерной совместимости из-за исторически багги IEsetAttribute, это работает только потому, что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">... является действительным.
Я думаю, что лучший способ может быть:
$("#ctl00_ContentPlaceHolder1_btnPlaceOrder").attr('disabled', true);Он работает кросс-браузер.
<button disabled=true>text here</button>вы все еще можете использовать атрибут. Просто используйте атрибут' disabled 'вместо'value'.
Comments