Acara pada input yang dinonaktifkan

Rupanya orang cacat <input>tidak ditangani oleh peristiwa apa pun

Apakah ada cara untuk mengatasi masalah ini?

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

Di sini, saya perlu mengklik input untuk mengaktifkannya. Tetapi jika saya tidak mengaktifkannya, input tidak boleh diposting.

Elemen yang dinonaktifkan tidak memecat acara mouse. Sebagian besar browser akan menyebarkan acara yang berasal dari elemen yang dinonaktifkan di atas pohon DOM, sehingga penangan acara dapat ditempatkan pada elemen kontainer. Namun, Firefox tidak menunjukkan perilaku ini, ia tidak melakukan apa-apa ketika Anda mengklik elemen yang dinonaktifkan.

Saya tidak bisa memikirkan solusi yang lebih baik tetapi, untuk kompatibilitas lintas browser lengkap, Anda dapat menempatkan elemen di depan input yang dinonaktifkan dan menangkap klik pada elemen itu. Berikut ini contoh yang saya maksud:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

Contoh: http://jsfiddle.net/RXqAm/170/ (diperbarui untuk menggunakan jQuery 1.7 dengan propalih - alih attr).

Mungkin Anda bisa membuat bidang hanya baca dan kirim menonaktifkan semua bidang hanya baca

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

dan input (+ skrip) seharusnya

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})

Elemen yang dinonaktifkan "memakan" klik di beberapa browser - mereka tidak meresponsnya, atau membiarkannya ditangkap oleh penangan acara di mana pun baik pada elemen atau salah satu wadahnya.

IMHO cara termudah dan terbersih untuk "memperbaiki" ini (jika Anda memang perlu menangkap klik pada elemen yang dinonaktifkan seperti OP) adalah hanya dengan menambahkan CSS berikut ke halaman Anda:

input[disabled] {pointer-events:none}

Ini akan membuat klik pada input yang dinonaktifkan jatuh ke elemen induk, di mana Anda dapat menangkapnya secara normal. (Jika Anda memiliki beberapa input yang dinonaktifkan, Anda mungkin ingin memasukkan masing-masing ke dalam wadah tersendiri, jika belum ditata seperti itu - tambahan <span>atau <div>, katakanlah - hanya untuk memudahkan membedakan input yang dinonaktifkan mana yang diklik).

Kelemahannya adalah bahwa trik ini sayangnya tidak akan berfungsi untuk browser lama yang tidak mendukung pointer-eventsproperti CSS. (Ini harus bekerja dari IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Jika Anda perlu mendukung browser lama, Anda harus menggunakan salah satu jawaban lain!

Saya akan menyarankan alternatif - gunakan CSS:

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

alih-alih atribut yang dinonaktifkan. Kemudian, Anda dapat menambahkan atribut CSS Anda sendiri untuk mensimulasikan input yang dinonaktifkan, tetapi dengan kontrol lebih.

Alih-alih disabled, Anda bisa mempertimbangkan untuk menggunakan readonly. Dengan beberapa CSS tambahan, Anda dapat mendesain input sehingga tampak seperti disabledbidang.

Sebenarnya ada masalah lain. Peristiwa changehanya memicu ketika elemen kehilangan fokus, yang tidak logis mempertimbangkan disabledbidang. Mungkin Anda mendorong data ke bidang ini dari panggilan lain. Untuk membuat ini berfungsi, Anda dapat menggunakan acara 'bind'.

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

ATAU lakukan ini dengan jQuery dan CSS!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

Dengan cara ini Anda membuat elemen terlihat dinonaktifkan dan tidak ada peristiwa pointer akan menyala, namun memungkinkan propagasi dan jika dikirimkan Anda dapat menggunakan atribut 'abaikan' untuk mengabaikannya.

Kami memiliki masalah hari ini seperti ini, tetapi kami tidak ingin mengubah HTML. Jadi kami menggunakan acara mouseenter untuk mencapai itu

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

Saya menemukan solusi lain:

<input type="text" class="disabled" name="test" value="test" />

Elemen "cacat" elemen cacat dinonaktifkan dengan opacity:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

Dan kemudian membatalkan acara jika elemen dinonaktifkan dan menghapus kelas:

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

saran di sini terlihat seperti kandidat yang baik untuk pertanyaan ini juga

Melakukan acara klik pada elemen yang dinonaktifkan? Javascript jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});