Nonaktifkan / aktifkan input dengan jQuery?

Jawaban:

3810

jQuery 1.6+

Untuk mengubah disabledproperti Anda harus menggunakan .prop()fungsi.

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 dan di bawah

The .prop()Fungsi tidak ada, tetapi .attr()tidak sama:

Setel atribut yang dinonaktifkan.

$("input").attr('disabled','disabled');

Untuk mengaktifkan kembali, metode yang tepat adalah menggunakan .removeAttr()

$("input").removeAttr('disabled');

Dalam versi jQuery apa pun

Anda selalu dapat mengandalkan objek DOM yang sebenarnya dan mungkin sedikit lebih cepat daripada dua opsi lainnya jika Anda hanya berurusan dengan satu elemen:

// assuming an event handler thus 'this'
this.disabled = true;

Keuntungan menggunakan metode .prop()atau .attr()adalah Anda dapat mengatur properti untuk banyak item yang dipilih.


Catatan: Dalam 1.6 ada .removeProp()metode yang terdengar sangat mirip removeAttr(), tetapi HARUS TIDAK DIGUNAKAN pada properti asli seperti 'disabled' Kutipan dari dokumentasi:

Catatan: Jangan gunakan metode ini untuk menghapus properti asli seperti dicentang, dinonaktifkan, atau dipilih. Ini akan menghapus properti sepenuhnya dan, setelah dihapus, tidak dapat ditambahkan lagi ke elemen. Gunakan .prop () untuk mengatur properti ini menjadi false.

Bahkan, saya ragu ada banyak kegunaan yang sah untuk metode ini, alat peraga boolean dilakukan sedemikian rupa sehingga Anda harus mengaturnya menjadi salah alih-alih "menghapus" mereka seperti rekan "atribut" mereka di 1,5

gnarf
sumber
9
Sebagai tambahan, ingat itu, jika Anda ingin menonaktifkan SEMUA kontrol input formulir - termasuk. checkbox, radio, textareas, dll. - Anda harus memilih ':input', bukan hanya 'input'. Yang terakhir hanya memilih elemen <input> yang sebenarnya.
Cornel Masson
35
@CornelMasson input,textarea,select,buttonsedikit lebih baik untuk digunakan daripada :input- :inputsebagai pemilih cukup tidak efisien karena harus memilih *kemudian loop atas setiap elemen dan filter dengan tagname - jika Anda melewati 4 pemilih tagname secara langsung, JAUH lebih cepat. Juga, :inputbukan pemilih CSS standar, sehingga setiap perolehan kinerja yang mungkin dari querySelectorAllhilang
gnarf
3
Apakah ini hanya mencegah pengguna mengaksesnya, atau apakah itu benar-benar menghapusnya dari permintaan web?
OneChillDude
4
Menggunakan .removeProp("disabled")itu menyebabkan masalah "properti dihapus sepenuhnya dan tidak ditambahkan lagi" seperti yang ditunjukkan oleh @ThomasDavidBaker, dalam hal beberapa browser seperti Chrome, sedangkan itu berfungsi dengan baik pada beberapa seperti Firefox. Kita harus benar-benar berhati-hati di sini. Selalu gunakan .prop("disabled",false)sebagai gantinya
Sandeepan Nath
6
Baik .prop atau .attr tidak cukup untuk menonaktifkan elemen anchor; .prop bahkan tidak akan menghapus 'kontrol' (.attr tidak, tetapi href masih aktif). Anda juga harus menambahkan event handler klik yang memanggil preventDefault ().
Jeff Lowery
61

Hanya demi konvensi baru && menjadikannya mudah beradaptasi di masa depan (kecuali hal-hal berubah secara drastis dengan ECMA6 (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

dan

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});
geekbuntu
sumber
12
Astaga! Kenapa $(document).on('event_name', '#your_id', function() {...})bukannya $('#your_id').on('event_name', function() {...}). Seperti yang dijelaskan dalam dokumentasi jQuery .on () , mantan menggunakan delegasi dan mendengarkan semua event_name peristiwa yang muncul documentdan memeriksa mereka untuk pencocokan #your_id. Yang terakhir hanya mendengarkan $('#your_id')acara tertentu dan itu berskala lebih baik.
Peter V. Mørch
23
Yang pertama bekerja untuk elemen yang dimasukkan ke DOM pada titik mana pun, yang terakhir hanya untuk yang masih ada pada saat itu.
crazymykl
1
@crazymykl Benar tetapi Anda tidak boleh menambahkan elemen dengan id yang sudah ada di halaman Anda.
SepehrM
33
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Terkadang Anda perlu menonaktifkan / mengaktifkan elemen form seperti input atau textarea. Jquery membantu Anda membuat ini dengan mudah dengan menyetel atribut yang dinonaktifkan ke "nonaktif". Untuk misalnya:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

Untuk mengaktifkan elemen yang dinonaktifkan, Anda perlu menghapus atribut "nonaktif" dari elemen ini atau mengosongkannya. Untuk misalnya:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

lihat: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html

Harini Sekar
sumber
13
$("input")[0].disabled = true;

atau

$("input")[0].disabled = false;
Sajjad Shirazy
sumber
2
Tentu saja pertanyaan yang diajukan untuk jQuery dan ini mengubah keadaan dalam JavaScript biasa, tetapi berhasil.
basic6
1
Ini mengubah status dalam JavaScript, tetapi masih menggunakan pemilih jQuery untuk mendapatkan input pertama.
cjsimon
3
Tapi saya tidak berpikir kita membuat ensiklopedia jquery di sini, jika sebuah jawaban berhasil, itu bagus
Sajjad Shirazy
8

Anda dapat menempatkan ini di suatu tempat global dalam kode Anda:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

Dan kemudian Anda dapat menulis hal-hal seperti:

$(".myInputs").enable();
$("#otherInput").disable();
Nicu Surdu
sumber
3
Sementara membungkus fungsionalitas itu berguna, Anda seharusnya menggunakan propdan tidak attr dengan disabledproperti agar berfungsi dengan benar (dengan asumsi jQuery 1.6 atau lebih tinggi).
Hilang Pengkodean
1
@ TrueBlueAussie Apa downside menggunakan attr? Saya menggunakan kode di atas dalam beberapa proyek dan sejauh yang saya ingat itu berfungsi ok
Nicu Surdu
1
Pengecualian yang jelas adalah kontrol dengan properti di belakang layar. Yang paling terkenal adalah checkedproperti kotak centang. Menggunakan attrtidak akan memberikan hasil yang sama.
Hilang Coding
7

Jika Anda hanya ingin membalikkan keadaan saat ini (seperti perilaku tombol sakelar):

$("input").prop('disabled', ! $("input").prop('disabled') );
daVe
sumber
1
terima kasih saya memiliki hal yang sama untuk beralih itu; $ ("input"). prop ('dinonaktifkan', berfungsi (i, v) {return! v;});
Floww
5

Ada banyak cara menggunakannya, Anda dapat mengaktifkan / menonaktifkan elemen apa pun :

Pendekatan 1

$("#txtName").attr("disabled", true);

Pendekatan 2

$("#txtName").attr("disabled", "disabled");

Jika Anda menggunakan jQuery 1.7 atau versi yang lebih tinggi maka gunakan prop (), bukan attr ().

$("#txtName").prop("disabled", "disabled");

Jika Anda ingin mengaktifkan elemen apa pun maka Anda hanya perlu melakukan kebalikan dari apa yang Anda lakukan untuk membuatnya dinonaktifkan. Namun jQuery menyediakan cara lain untuk menghapus atribut apa pun.

Pendekatan 1

$("#txtName").attr("disabled", false);

Pendekatan 2

$("#txtName").attr("disabled", "");

Pendekatan 3

$("#txtName").removeAttr("disabled");

Sekali lagi, jika Anda menggunakan jQuery 1.7 atau versi yang lebih tinggi maka gunakan prop (), bukan attr (). Yaitu. Ini adalah bagaimana Anda mengaktifkan atau menonaktifkan elemen apa pun menggunakan jQuery.

pembuat kode liar
sumber
2

Pembaruan untuk 2018:

Sekarang tidak ada kebutuhan untuk jQuery dan itu sudah lama sejak document.querySelector atau document.querySelectorAll(untuk beberapa elemen) melakukan pekerjaan hampir persis sama dengan $, ditambah yang lebih eksplisit getElementById, getElementsByClassName,getElementsByTagName

Menonaktifkan satu bidang kelas "input-checkbox"

document.querySelector('.input-checkbox').disabled = true;

atau beberapa elemen

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
Pawel
sumber
1
pertanyaannya secara khusus menanyakan tentang jQuery ... tetapi sama-sama pernyataan Anda benar, dan patut diketahui bahwa jQuery tidak perlu digunakan untuk ini ketika ada beberapa elemen lagi.
ADyson
2

Anda bisa menggunakan metode jQuery prop () untuk menonaktifkan atau mengaktifkan elemen form atau mengontrol secara dinamis menggunakan jQuery. Metode prop () memerlukan jQuery 1.6 ke atas.

Contoh:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>
SPARTAN
sumber
1

Nonaktifkan:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Memungkinkan:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.
Tomer Ben David
sumber
1

Nonaktifkan true untuk tipe input:

Dalam hal jenis input tertentu ( Mis. Input tipe Teks )

$("input[type=text]").attr('disabled', true);

Untuk semua jenis tipe input

$("input").attr('disabled', true);
Hasib Kamal
sumber
1
Terima kasih ini membantu saya mengisolasi ke nama input. $("input[name=method]").prop('disabled', true);
Harry Bosh
1

ini bekerja untuk saya

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
belajarkevin
sumber
0

Saya menggunakan @gnarf jawab dan menambahkannya sebagai fungsi

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

Kemudian gunakan seperti ini

$('#myElement').disable(true);
Imants Volkovs
sumber
0

2018, tanpa JQuery (ES6)

Nonaktifkan semua input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

Nonaktifkan inputdenganid="my-input"

document.getElementById('my-input').disabled = true;

Pertanyaannya adalah dengan JQuery, itu hanya FYI.

rap-2-h
sumber
0

Gunakan seperti ini,

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

 $( "#id" ).prop( "disabled", false );
Abdus Salam Azad
sumber
-1
<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

sumber
1
Dari antrian ulasan : Boleh saya minta Anda untuk menambahkan beberapa konteks di sekitar jawaban Anda. Jawaban khusus kode sulit dipahami. Ini akan membantu penanya dan pembaca di masa mendatang jika Anda dapat menambahkan lebih banyak informasi dalam posting Anda.
RBT
-1

Di jQuery Mobile:

Untuk menonaktifkan

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

Untuk mengaktifkan

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
Atif Hussain
sumber