Tambahkan atribut yang dinonaktifkan ke elemen masukan menggunakan Javascript


147

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?

Jawaban:


316

$("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 ...


3
+1 untuk membuat teks pembaruan cukup besar bagi saya untuk diperhatikan
Vael Victus

@VaelVictTidak terlalu cepat. Saya minta maaf untuk mengatakan mereka telah mengubahnya lagi setahun setelah saya memposting ini ... dan saya lupa tentang jawaban ini. Baca jawaban ini: stackoverflow.com/a/5876747/257493
Incognito

1
Diferensiasi dokumen / non-dokumen antara .prop dan .attr sangat membantu dan saya belum pernah melihat konteks yang dibingkai sedemikian ringkas sebelumnya. Sangat dihargai!
tak tertandingi

55

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

2
Sebagai catatan untuk orang-orang yang datang ke sini dari Google, langsung dari jQuery :As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method
Erenor Paz

16

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

Tentang apa $element.eq(0)[0].disabled = true;? :-P
qwertynl

1
Ya, itu untuk maju bagi saya, saya tidak melangkah sejauh itu untuk meningkatkan kinerja.
iConnor

+1. Meski agak mubazir. Jika Anda akan berurusan dengan NodeList / array elemen, konyol untuk memilihnya dengan indeks seperti itu. Iterasi atau hanya memilih elemen yang Anda butuhkan lebih masuk akal.

14
$(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.


1
Terima kasih telah memberikan solusi yang tidak membutuhkan jQuery.
Elias Zamaria

12

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

5

Cukup gunakan attr()metode jQuery

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

4
dan hapus status dinonaktifkan menggunakan.removeAttr('disabled');
ruhong

2

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.