จะปิดการใช้งานปุ่ม HTML โดยใช้ JavaScript ได้อย่างไร

ฉันได้อ่านแล้วว่าคุณสามารถปิดการใช้งาน (ทำให้ไม่สามารถคลิกทางกายภาพ) ปุ่ม HTML เพียงแค่ต่อท้ายdisableแท็ก แต่ไม่สามารถใช้เป็นแอตทริบิวต์ได้ดังต่อไปนี้:

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

เนื่องจากการตั้งค่านี้ไม่ใช่แอตทริบิวต์ฉันจะเพิ่มสิ่งนี้ในแบบไดนามิกผ่าน JavaScript เพื่อปิดใช้งานปุ่มที่เปิดใช้ก่อนหน้านี้ได้อย่างไร

เนื่องจากการตั้งค่านี้ไม่ใช่แอตทริบิวต์

มันเป็นคุณสมบัติ

บางแอททริบิวต์ถูกกำหนดเป็นบูลีนซึ่งหมายความว่าคุณสามารถระบุค่าของมันและปล่อยทุกอย่างออก เช่นแทนที่จะปิดใช้งาน = " ปิดใช้งาน " คุณจะรวมเฉพาะส่วนที่เป็นตัวหนา ใน HTML 4 คุณควรจะรวมเฉพาะส่วนที่เป็นตัวหนาเป็นเวอร์ชันเต็มถูกทำเครื่องหมายเป็นคุณลักษณะที่มีการสนับสนุนที่ จำกัด (ถึงแม้ว่ามันจะเป็นความจริงน้อยตอนนี้แล้วเมื่อสเปคที่เขียน)

ตั้งแต่ HTML 5 กฎมีการเปลี่ยนแปลงและตอนนี้คุณรวมเฉพาะชื่อและไม่ใช่ค่า สิ่งนี้ทำให้ไม่มีความแตกต่างในทางปฏิบัติเพราะชื่อและค่าเหมือนกัน

คุณสมบัติ DOMจะเรียกว่าdisabledและเป็นบูลีนที่ใช้หรือtruefalse

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

วิธีที่เป็นทางการในการตั้งค่า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);
}

ฉันหวังว่าสิ่งนี้จะชี้แจงความสับสนเกี่ยวกับความแตกต่างระหว่างคุณสมบัติและคุณลักษณะ

มันยังคงเป็นคุณลักษณะ ตั้งค่าเป็น:

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

... ถูกต้อง

หากคุณมีวัตถุปุ่มเรียกว่า b: b.disabled=false;

ฉันคิดว่าวิธีที่ดีที่สุดน่าจะเป็น:

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

มันทำงานได้ดีข้ามเบราว์เซอร์

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

คุณยังคงสามารถใช้คุณสมบัติได้ เพียงใช้แอตทริบิวต์ 'ปิดการใช้งาน' แทน 'ค่า'