เหตุการณ์ในอินพุตที่ปิดใช้งาน

เห็นได้ชัดว่าปิดการใช้งาน<input>ไม่ได้ถูกจัดการโดยเหตุการณ์ใด ๆ

มีวิธีแก้ไขปัญหานี้หรือไม่?

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

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

ที่นี่ฉันต้องคลิกที่อินพุตเพื่อเปิดใช้งาน แต่ถ้าฉันไม่เปิดใช้งานมันไม่ควรโพสต์อินพุต

องค์ประกอบที่ปิดใช้งานจะไม่สร้างเหตุการณ์เมาส์ เบราว์เซอร์ส่วนใหญ่จะเผยแพร่เหตุการณ์ที่เกิดขึ้นจากองค์ประกอบที่ถูกปิดใช้งานในแผนผัง DOM ดังนั้นตัวจัดการเหตุการณ์จึงสามารถวางบนองค์ประกอบของคอนเทนเนอร์ได้ อย่างไรก็ตาม Firefox จะไม่แสดงพฤติกรรมนี้มันไม่ได้ทำอะไรเลยเมื่อคุณคลิกที่องค์ประกอบที่ถูกปิดใช้งาน

ฉันไม่คิดว่าจะมีวิธีแก้ปัญหาที่ดีกว่านี้ แต่เพื่อความเข้ากันได้ของเบราว์เซอร์ที่สมบูรณ์คุณสามารถวางองค์ประกอบไว้หน้าอินพุตที่ถูกปิดใช้งานและจับการคลิกที่องค์ประกอบนั้น นี่คือตัวอย่างของสิ่งที่ฉันหมายถึง:

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

ตัวอย่าง: http://jsfiddle.net/RXqAm/170/ (อัปเดตเพื่อใช้ jQuery 1.7 ด้วยpropแทนที่จะเป็น attr)

บางทีคุณอาจทำให้ฟิลด์เป็นแบบอ่านอย่างเดียวและในการส่งปิดใช้งานฟิลด์แบบอ่านอย่างเดียวทั้งหมด

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

และอินพุต (+ สคริปต์) ควรเป็น

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

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

องค์ประกอบที่ปิดใช้งานคลิก "กิน" ในบางเบราว์เซอร์ - พวกเขาไม่ตอบสนองต่อพวกเขาและไม่อนุญาตให้มีการจัดการโดยตัวจัดการเหตุการณ์ที่ใดก็ได้ในองค์ประกอบหรือภาชนะใด ๆ

IMHO วิธีที่ง่ายและสะอาดที่สุดในการ "แก้ไข" สิ่งนี้ (ถ้าคุณจำเป็นต้องบันทึกการคลิกในองค์ประกอบที่ถูกปิดใช้งานเช่น OP) เพียงเพิ่ม CSS ต่อไปนี้ในหน้าของคุณ:

input[disabled] {pointer-events:none}

สิ่งนี้จะทำการคลิกใด ๆ ที่อินพุตที่ถูกปิดใช้งานอยู่ในองค์ประกอบหลักซึ่งคุณสามารถจับภาพได้ตามปกติ (หากคุณมีอินพุตที่ถูกปิดใช้งานหลายตัวคุณอาจต้องการใส่แต่ละอันลงในคอนเทนเนอร์ส่วนตัวของมันเองหากยังไม่ได้จัดวางไว้เช่นนั้นเป็นพิเศษ<span>หรือก<div>พูดเพียงเพื่อให้แยกแยะอินพุตที่ปิดใช้งานได้ง่าย ถูกคลิก)

ข้อเสียคือเคล็ดลับนี้น่าเสียดายที่ไม่สามารถใช้ได้กับเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุนpointer-eventsคุณสมบัติ CSS (ควรทำงานได้จาก IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

หากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าคุณจะต้องใช้คำตอบอย่างใดอย่างหนึ่ง!

ฉันขอแนะนำทางเลือก - ใช้ CSS:

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

แทนที่จะปิดใช้งานแอตทริบิวต์ จากนั้นคุณสามารถเพิ่มคุณสมบัติ CSS ของคุณเองเพื่อจำลองอินพุตที่ปิดใช้งาน แต่มีการควบคุมที่มากขึ้น

แทนที่จะคุณสามารถพิจารณาใช้disabled readonlyด้วย CSS พิเศษบางอย่างคุณสามารถจัดรูปแบบอินพุตให้ดูเหมือนdisabledฟิลด์

มีปัญหาอื่นจริง เหตุการณ์changeจะทริกเกอร์เมื่อองค์ประกอบสูญเสียการโฟกัสซึ่งไม่ใช่ตรรกะเมื่อพิจารณาจากdisabledเขตข้อมูล อาจเป็นไปได้ว่าคุณกำลังส่งข้อมูลไปยังฟิลด์นี้จากการโทรอื่น เพื่อให้งานนี้คุณสามารถใช้ 'ผูก' เหตุการณ์

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

หรือทำสิ่งนี้กับ jQuery และ CSS!

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

วิธีนี้คุณทำให้องค์ประกอบดูไม่ทำงานและไม่มีเหตุการณ์ตัวชี้ใด ๆ ทำงาน แต่จะอนุญาตการเผยแพร่และหากส่งคุณสามารถใช้แอตทริบิวต์ 'ละเว้น' เพื่อเพิกเฉยได้

วันนี้เรามีปัญหาเช่นนี้ แต่เราไม่ต้องการเปลี่ยน HTML ดังนั้นเราจึงใช้เหตุการณ์mouseenterเพื่อบรรลุเป้าหมายนั้น

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

ฉันหาทางออกอื่น:

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

คลาส "disabled" ส่งองค์ประกอบที่ปิดใช้งานโดยความทึบ:

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

และยกเลิกกิจกรรมหากองค์ประกอบถูกปิดใช้งานและลบคลาส:

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

ข้อเสนอแนะที่นี่ดูเหมือนจะเป็นตัวเลือกที่ดีสำหรับคำถามนี้เช่นกัน

กำลังทำการคลิกเหตุการณ์บนองค์ประกอบที่ถูกปิดใช้งานหรือไม่ Javascript jQuery

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