Как отключить кнопку 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);
}