Tambahkan atribut yang dinonaktifkan ke elemen masukan menggunakan Javascript

Saya memiliki kotak input dan saya ingin itu dinonaktifkan dan pada saat yang sama menyembunyikannya untuk menghindari masalah saat mem-porting formulir saya.

Sejauh ini saya memiliki kode berikut untuk menyembunyikan masukan saya:

$(".shownextrow").click(function() { 
    $(this).closest("tr").next().show().find('.longboxsmall').hide();
});

Ini adalah input yang disembunyikan sebagai hasilnya:

<input class="longboxsmall" type="text" />

Bagaimana saya juga bisa menambahkan atribut nonaktif ke input?

$("input").attr("disabled", true); sejak ... Saya tidak tahu lagi.

Ini Desember 2013 dan saya benar-benar tidak tahu harus berkata apa kepada Anda.

Pertama selalu .attr(), lalu selalu .prop(), jadi saya kembali ke sini memperbarui jawaban dan membuatnya lebih akurat.

Kemudian setahun kemudian jQuery berubah pikiran lagi dan saya bahkan tidak ingin melacak ini.

Singkat cerita, untuk saat ini, ini adalah jawaban terbaik: "Anda dapat menggunakan keduanya ... tetapi itu tergantung."

Anda harus membaca jawaban ini sebagai gantinya: https://stackoverflow.com/a/5876747/257493

Dan catatan rilis mereka untuk perubahan itu disertakan di sini:

Baik .attr () maupun .prop () tidak boleh digunakan untuk mendapatkan / menyetel nilai. Gunakan metode .val () sebagai gantinya (meskipun menggunakan .attr ("value", "somevalue") akan terus berfungsi, seperti sebelumnya 1.6).

Ringkasan Penggunaan Pilihan

Metode .prop () harus digunakan untuk atribut / properti boolean dan untuk properti yang tidak ada di html (seperti window.location). Semua atribut lainnya (yang dapat Anda lihat di html) dapat dan harus terus dimanipulasi dengan metode .attr ().

Atau dengan kata lain:

".prop = barang non-dokumen"

".attr" = dokumen barang

... ...

Semoga kita semua belajar di sini tentang stabilitas API ...

Kode kerja dari sumber saya:

DUNIA HTML

<select name="select_from" disabled>...</select>

JS WORLD

var from = jQuery('select[name=select_from]');

//add disabled
from.attr('disabled', 'disabled');



//remove it
from.removeAttr("disabled");

Jika Anda menggunakan jQuery, maka ada beberapa cara berbeda untuk mengatur atribut yang dinonaktifkan.

var $element = $(...);
    $element.prop('disabled', true);
    $element.attr('disabled', true); 

    // The following do not require jQuery
    $element.get(0).disabled = true;
    $element.get(0).setAttribute('disabled', true);
    $element[0].disabled = true;
    $element[0].setAttribute('disabled', true);

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

Semua hal di atas adalah solusi yang benar-benar valid. Pilih salah satu yang paling sesuai dengan kebutuhan Anda.

Anda bisa mendapatkan elemen DOM, dan menyetel properti yang dinonaktifkan secara langsung.

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').hide()[0].disabled = 'disabled';
});

atau jika ada lebih dari satu, Anda dapat menggunakan each()untuk mengatur semuanya:

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() {
               this.style.display = 'none';
               this.disabled = 'disabled';
          });
});

Cukup gunakan attr()metode jQuery

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');

Karena pertanyaannya menanyakan bagaimana melakukan ini dengan JS, saya menyediakan implementasi JS vanilla.

var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
  element.disabled = "disabled";
}