Bagaimana cara menonaktifkan tombol HTML menggunakan JavaScript?

Saya telah membaca bahwa Anda dapat menonaktifkan (membuat secara fisik tidak dapat diklik) tombol HTML hanya dengan menambahkan disabletag-nya, tetapi tidak sebagai atribut, sebagai berikut:

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

Karena pengaturan ini bukan atribut, bagaimana saya bisa menambahkan ini secara dinamis melalui JavaScript untuk menonaktifkan tombol yang sebelumnya diaktifkan?

Karena pengaturan ini bukan atribut

Itu adalah atribut.

Beberapa atribut didefinisikan sebagai boolean, yang berarti Anda dapat menentukan nilainya dan mengabaikan yang lainnya. yaitu Alih-alih dinonaktifkan = " dinonaktifkan ", Anda hanya menyertakan bagian cetak tebal. Dalam HTML 4, Anda harus memasukkan hanya bagian yang tebal karena versi lengkap ditandai sebagai fitur dengan dukungan terbatas (meskipun itu kurang benar sekarang maka ketika spesifikasi ditulis).

Pada HTML 5, aturan telah berubah dan sekarang Anda hanya memasukkan nama dan bukan nilainya. Ini tidak membuat perbedaan praktis karena nama dan nilainya sama.

The properti DOM juga disebut disableddan merupakan boolean yang mengambil trueatau false.

foo.disabled = true;

Secara teori Anda juga bisa foo.setAttribute('disabled', 'disabled');dan foo.removeAttribute("disabled"), tapi saya tidak akan mempercayai ini dengan versi Internet Explorer yang lebih lama (yang terkenal bermasalah ketika menyangkut setAttribute).

untuk menonaktifkan

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

untuk mengaktifkan

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

Itu adalah atribut, tetapi atribut boolean (jadi tidak perlu nama, hanya nilai - saya tahu, ini aneh). Anda dapat mengatur persamaan properti di Javascript:

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

Coba yang berikut ini:

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

Cara resmi untuk menetapkan disabledatribut pada HTMLInputElementadalah ini:

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

Sementara jawaban @ kaushar cukup untuk mengaktifkan dan menonaktifkan HTMLInputElement, dan mungkin lebih disukai untuk kompatibilitas lintas-browser karena IE secara historis buggy setAttribute, itu hanya berfungsi karena atribut atribut Elementshadow Element. Jika properti diatur, maka DOM menggunakan nilai properti secara default daripada nilai atribut yang setara.

Ada perbedaan yang sangat penting antara properti dan atribut. Contoh HTMLInputElement properti sebenarnya adalah input.value, dan di bawah ini menunjukkan cara kerja bayangan:

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

Itulah artinya mengatakan bahwa atribut atribut bayangan. Konsep ini juga berlaku untuk properti yang diwarisi pada prototyperantai:

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

Saya harap ini menjelaskan segala kebingungan tentang perbedaan antara properti dan atribut.

Itu masih atribut. Pengaturan ke:

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

... adalah benar.

Jika Anda memiliki objek tombol, disebut b: b.disabled=false;

Saya pikir cara terbaik adalah:

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

Ini berfungsi lintas-browser yang baik.

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

Anda masih bisa menggunakan atribut. Cukup gunakan atribut 'dinonaktifkan' alih-alih 'nilai'.