Bagaimana cara menghapus atribut "dinonaktifkan" menggunakan jQuery?

394

Saya harus menonaktifkan input pada awalnya dan kemudian mengklik tautan untuk mengaktifkannya.

Inilah yang saya coba sejauh ini, tetapi tidak berhasil.

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

jQuery:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').removeAttr("disabled")
});


Ini menunjukkan saya truedan kemudian falsetetapi tidak ada perubahan untuk input:

$("#edit").click(function(event){
   alert('');
   event.preventDefault();
   alert($('.inputDisabled').attr('disabled'));
   $('.inputDisabled').removeAttr("disabled");
   alert($('.inputDisabled').attr('disabled'));
});
fatiDev
sumber
2
Saya tidak melihat masalah Anda. Apa yang kamu tanyakan?
nicosantangelo
Jadi apa pertanyaannya? maksud saya masalah apa yang Anda hadapi
Satya Teja
7
Gunakan prop () - .prop ('dinonaktifkan', salah)
Jay Blanchard
Jika masalah Anda terpecahkan, silakan centang jawaban yang diterima (Nyata) agar orang lain tahu ...
Dhamu
masalahnya adalah tidak dinonaktifkan setelah klik
fatiDev

Jawaban:

817

Selalu gunakan prop()metode untuk mengaktifkan atau menonaktifkan elemen saat menggunakan jQuery (lihat alasannya di bawah).

Dalam kasus Anda, itu akan menjadi:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
});

Contoh jsFiddle di sini.


Mengapa menggunakan prop()ketika Anda bisa menggunakan attr()/ removeAttr()untuk melakukan ini?

Pada dasarnya, prop()harus digunakan ketika mendapatkan atau pengaturan properti (seperti autoplay, checked, disableddan requiredantara lain).

Dengan menggunakan removeAttr(), Anda benar-benar menghapus disabledatribut itu sendiri - sementara prop()hanya menyetel nilai boolean yang mendasari properti menjadi false.

Sementara apa yang ingin Anda lakukan dapat dilakukan menggunakan attr()/ removeAttr(), itu tidak berarti harus dilakukan (dan dapat menyebabkan perilaku aneh / bermasalah, seperti dalam kasus ini).

Ekstrak berikut (diambil dari dokumentasi jQuery for prop () ) menjelaskan poin-poin ini secara lebih rinci:

"Perbedaan antara atribut dan properti dapat menjadi penting dalam situasi tertentu. Sebelum jQuery 1.6, .attr()metode ini terkadang memperhitungkan nilai properti ketika mengambil beberapa atribut, yang dapat menyebabkan perilaku tidak konsisten. Pada jQuery 1.6, .prop() metode ini menyediakan cara untuk secara eksplisit mengambil nilai properti, saat .attr()mengambil atribut. "

"Properti umumnya memengaruhi keadaan dinamis elemen DOM tanpa mengubah atribut HTML serial. Contohnya termasuk value properti elemen input, disabledproperti input dan tombol, atau checkedproperti kotak centang. .prop()Metode ini harus digunakan untuk mengatur disableddan checkedalih-alih yang .attr() metode. The .val()metode harus digunakan untuk mendapatkan dan pengaturan value."

dsgriffin
sumber
3
Orang-orang juga harus tahu tentang bendera checkness kotor, yang benar-benar rusak attrvs propuntuk kotak centang: w3.org/TR/html5/forms.html#concept-input-checked-dirty kecuali untuk sihir solusi jQuery internal.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
19
Hmm, .prop ("dinonaktifkan", salah) sepertinya tidak berfungsi untuk saya di tombol - meninggalkan atribut 'dinonaktifkan' di tag tanpa nilai.
UpTheCreek
3
@UpTheCreek tidak bekerja untuk saya juga. Tapi saya menemukan masalah cakupan dengan klausa 'ini' (seperti biasa). Dalam kasus tertentu .prop()dieksekusi pada elemen yang ditunjuk oleh this( this.prop("disabled", false), tetapi menjadi panggilan balik itu mengikat elemen yang salah, jadi saya harus melakukan var that = thissolusi umum . Mencoba bermain dengan .apply()/ .call()tidak bekerja dengan baik; Saya tidak tahu mengapa. Periksa dengan a console.log(this)jika diatur ke objek yang Anda inginkan, sebelum meneleponthis.prop(...)
Kamafeather
3
Saya mencalonkan jawaban ini sebagai kandidat untuk konversi ke bagian dokumen. Jelas, lengkap, ditulis dengan baik.
Anne Gunn
4
Dengan menggunakan removeAttr (), Anda sepenuhnya menghapus atribut yang dinonaktifkan itu sendiri - sementara prop () hanya mengatur nilai boolean yang mendasari properti menjadi false. Saya tidak percaya ini benar. Dalam HTML, keberadaan disabledproperti saja akan menonaktifkan elemen. Misalnya, memiliki <button disabled="false"></button> tidak akan mengaktifkan tombol, properti harus dihapus. Dengan memanggil $('button').prop('disabled', false);jQuery akan menghapus properti untuk Anda, seperti yang saya amati dalam codepen ini (periksa untuk melihat penghapusan properti).
Naftali
42
<input type="text" disabled="disabled" class="inputDisabled" value="">
​<button id="edit">Edit</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$("#edit").click(function(event){
    event.preventDefault();
    $('.inputDisabled').removeAttr("disabled")
});​

http://jsfiddle.net/ZwHfY/

Muthu Kumaran
sumber
42

untuk menghapus penggunaan atribut yang dinonaktifkan,

 $("#elementID").removeAttr('disabled');

dan untuk menambahkan penggunaan atribut yang dinonaktifkan,

$("#elementID").prop("disabled", true);

Nikmati :)

Umesh Patil
sumber
4
Atau cukup element.removeAttribute ('dinonaktifkan') di vanilla js
Dragos Rusu
16

Gunakan seperti ini,

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

<div id="edit">edit</div>

JS:

 $('#edit').click(function(){ // click to
            $('.inputDisabled').attr('disabled',false); // removing disabled in this class
 });
Dhamu
sumber
6
Yang ini sebenarnya bekerja untuk saya. Prop ('dinonaktifkan', salah) ternyata tidak berfungsi.
Stefan
@Stefan hal yang sama di sini! Apakah Anda mencari tahu mengapa?
Alexander Suraphel
1
Saya tahu ini adalah utas kuno tetapi jika seseorang masih berjuang dengan ini, masalah saya adalah bahwa elemennya adalah <a>, yang .prop('disabled', false)tidak berfungsi. Saya mengubahnya menjadi <button>dan berfungsi sekarang
Oliver Nagy
9

Saya pikir Anda mencoba untuk beralih ke keadaan dinonaktifkan, jika Anda harus menggunakan ini (dari pertanyaan ini ):

$(".inputDisabled").prop('disabled', function (_, val) { return ! val; });

Ini biola yang berfungsi.

nicosantangelo
sumber
3

Pikir ini, Anda dapat dengan mudah mengatur

$(function(){
$("input[name^=radio_share]").click
(
    function()
    {
        if($(this).attr("id")=="radio_share_dependent")
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);   
        }
        else
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);   
        }
    }
 );
});
Er.gaurav soni
sumber
3

Ini adalah satu-satunya kode yang berfungsi untuk saya:

element.removeProp('disabled')

Perhatikan bahwa ini removePropdan bukan removeAttr.

Saya menggunakan di jQuery 2.1.3sini.

Leniel Maccaferri
sumber
12
Dari dokumentasi jQuery: Penting: metode .removeProp () tidak boleh digunakan untuk mengatur properti ini menjadi false. Setelah properti asli dihapus, itu tidak dapat ditambahkan lagi. Lihat .removeProp () untuk informasi lebih lanjut.
XanatosLightfiren
2

2018, tanpa JQuery

Saya tahu pertanyaannya adalah tentang JQuery: jawaban ini hanya FYI.

document.getElementById('edit').addEventListener(event => {
    event.preventDefault();
    [...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
}); 
rap-2-h
sumber
0

Pertanyaan ini secara khusus menyebutkan jQuery, tetapi jika Anda ingin menyelesaikan ini tanpa jQuery, padanannya dalam vanilla JavaScript adalah:

elem.removeAttribute('disabled');
jdgregson
sumber
elem.removeAttr('disabled');bekerja untuk saya
Cheng Hui Yuan