Làm cách nào để tắt nút HTML bằng JavaScript?

Tôi đã đọc rằng bạn có thể vô hiệu hóa (làm cho vật lý không thể nhìn thấy) một nút HTML chỉ bằng cách thêm disablevào thẻ của nó, nhưng không phải là một thuộc tính, như sau:

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

Vì cài đặt này không phải là một thuộc tính, làm cách nào tôi có thể thêm động này thông qua JavaScript để tắt nút đã được bật trước đó?

Vì cài đặt này không phải là một thuộc tính

Nó là một thuộc tính.

Một số thuộc tính được định nghĩa là boolean, có nghĩa là bạn có thể chỉ định giá trị của chúng và bỏ qua mọi thứ khác. tức là Thay vì bị vô hiệu hóa = " bị vô hiệu hóa ", bạn chỉ bao gồm phần in đậm. Trong HTML 4, bạn chỉ nên bao gồm phần in đậm vì phiên bản đầy đủ được đánh dấu là một tính năng có hỗ trợ hạn chế (mặc dù điều đó bây giờ ít đúng hơn khi thông số kỹ thuật được viết).

Kể từ HTML 5, các quy tắc đã thay đổi và bây giờ bạn chỉ bao gồm tên và không bao gồm giá trị. Điều này làm cho không có sự khác biệt thực tế bởi vì tên và giá trị là như nhau.

Các bất động sản DOM cũng được gọi disabledvà là một boolean mà mất truehay false.

foo.disabled = true;

Về lý thuyết, bạn cũng có thể foo.setAttribute('disabled', 'disabled');và foo.removeAttribute("disabled"), nhưng tôi sẽ không tin điều này với các phiên bản Internet Explorer cũ hơn (vốn nổi tiếng là lỗi khi nói đến setAttribute).

để vô hiệu hóa

document.getElementById("btnPlaceOrder").disabled = true; 

để kích hoạt

document.getElementById("btnPlaceOrder").disabled = false; 

Nó là một thuộc tính, nhưng là một thuộc tính boolean (vì vậy nó không cần tên, chỉ là một giá trị - tôi biết, nó thật kỳ lạ). Bạn có thể đặt thuộc tính tương đương trong Javascript:

document.getElementsByName("myButton")[0].disabled = true;

Hãy thử như sau:

document.getElementById("id").setAttribute("disabled", "disabled");

Cách chính thức để đặt disabledthuộc tính trên một HTMLInputElementlà:

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');

Mặc dù câu trả lời của @ kaushar là đủ để kích hoạt và vô hiệu hóa HTMLInputElement, và có lẽ thích hợp hơn cho khả năng tương thích trình duyệt chéo do lỗi lịch sử của IE setAttribute, nhưng nó chỉ hoạt động vì Elementthuộc tính bóng Element. Nếu một thuộc tính được đặt, thì DOM sử dụng giá trị của thuộc tính theo mặc định thay vì giá trị của thuộc tính tương đương.

Có một sự khác biệt rất quan trọng giữa các thuộc tính và thuộc tính. Một ví dụ về một HTMLInputElement tài sản thực sự là input.value, và dưới đây cho thấy cách thức hoạt động của bóng:

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" />

Đó là những gì nó có nghĩa để nói rằng thuộc tính bóng thuộc tính. Khái niệm này cũng áp dụng cho các thuộc tính được kế thừa trên prototypechuỗi:

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);
}

Tôi hy vọng điều này làm rõ bất kỳ sự nhầm lẫn nào về sự khác biệt giữa các thuộc tính và thuộc tính.

Nó vẫn là một thuộc tính. Đặt nó thành:

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

... là hợp lệ.

Nếu bạn có đối tượng nút, được gọi là b: b.disabled=false;

Tôi nghĩ rằng cách tốt nhất có thể là:

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

Nó hoạt động tốt trên nhiều trình duyệt.

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

Bạn vẫn có thể sử dụng một thuộc tính. Chỉ cần sử dụng thuộc tính 'bị vô hiệu hóa thay vì' giá trị '.