Как отключить кнопку html с помощью JavaScript?
Я читал, что вы можете отключить (сделать физически unclickable) кнопку html просто, но добавив "отключить" его тег, но не как атрибут, следующим образом:
<input type="button" name=myButton value="disable" disabled>
Поскольку этот параметр не является атрибутом, как можно добавить это динамически с помощью JavaScript, чтобы отключить кнопку, которая была ранее включена?
Ответы
Ответ 1
Поскольку этот параметр не является атрибутом
Это атрибут.
Некоторые атрибуты определяются как boolean, что означает, что вы можете указать их значение и оставить все остальное. Т.е. вместо disabled = " отключено" вы включаете только полужирный фрагмент. В HTML 4 вы должны включить только жирную часть, поскольку полная версия помечена как функция с ограниченной поддержкой (хотя это сейчас не так верно когда спецификация была написана).
Начиная с HTML 5, правила изменились, и теперь вы включаете только имя, а не значение. Это не имеет практического значения, потому что имя и значение одинаковы.
Свойство DOM также называется disabled
и является логическим, которое принимает true
или false
.
foo.disabled = true;
В теории вы также можете foo.setAttribute('disabled', 'disabled');
и foo.removeAttribute("disabled")
, но я бы не доверял этому более старым версиям Internet Explorer (которые, как известно, ошибочны, когда дело доходит до setAttribute
).
Ответ 2
отключить
document.getElementById("btnPlaceOrder").disabled = true;
чтобы включить
document.getElementById("btnPlaceOrder").disabled = false;
Ответ 3
Это атрибут, но логический (поэтому ему не нужно имя, просто значение - я знаю, это странно). Вы можете установить эквивалент свойства в Javascript:
document.getElementsByName("myButton")[0].disabled = true;
Ответ 4
Попробуйте следующее:
document.getElementById("id").setAttribute("disabled", "disabled");
Ответ 5
Официальным способом установки атрибута 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 answer достаточно для включения и отключения HTMLInputElement
, и, вероятно, предпочтительнее для кросс-браузерной совместимости из-за IE исторически багги setAttribute
, он работает только потому, что Element
свойства shadow 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 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" />
Ответ 6
Если у вас есть объект кнопки, называемый b: b.disabled=false;
Ответ 7
Это еще атрибут. Установите для этого значение:
<input type="button" name=myButton value="disable" disabled="disabled">
....
Ответ 8
Я думаю, что лучший способ может быть:
$("#ctl00_ContentPlaceHolder1_btnPlaceOrder").attr('disabled', true);
Он отлично работает в кросс-браузере.
Ответ 9
<button disabled=true>text here</button>
Вы все равно можете использовать атрибут. Просто используйте атрибут "disabled" вместо "value".
Ответ 10
Различные способы сделать это:
function disableBtn() {
document.getElementById("myBtn").disabled = true;
}
или
$(document).on("click", ".create-user", function (e) {
$(".create-user").attr("disabled", true);
}