Nonaktifkan / aktifkan input dengan jQuery?

$input.disabled = true;

atau

$input.disabled = "disabled";

Yang merupakan cara standar? Dan, sebaliknya, bagaimana Anda mengaktifkan input yang dinonaktifkan?

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

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

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

$("input")[0].disabled = true;

atau

$("input")[0].disabled = false;

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

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

$("input").prop('disabled', ! $("input").prop('disabled') );

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.

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

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>

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.

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

ini bekerja untuk saya

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

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

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.

Pendekatan 4 (ini merupakan perluasan dari jawaban pembuat kode liar )

txtName.disabled=1     // 0 for enable

<input id="txtName">

Gunakan seperti ini,

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

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

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

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