2012-02-26 50 views
12

Tôi đang triển khai biểu mẫu, nhờ đó tôi muốn vô hiệu hóa một số button và hiển thị chú giải công cụ giải thích lý do tại sao nó bị tắt khi di chuột. Tuy nhiên khi một button bị vô hiệu, chú giải công cụ không hiển thị.jQuery có không kích hoạt sự kiện di chuột trên nút bị vô hiệu hóa không?

Tôi đã thêm một trường hợp thử nghiệm ở đây, tái tạo chỉ với jQuery: http://jsfiddle.net/BYeFJ/1/

Dường như jQuery không bắn sự kiện này, hoặc là trình duyệt không bắn sự kiện di chuột?

Tôi đang sử dụng Twitter Bootstrap's Tooltip Module và tất nhiên, jQuery.

NB: Tôi cũng đã thử điều này với một wrapper quanh nút - nhưng nó nuốt trạng thái di chuột có vẻ như, và tôi cũng đã cố gắng sử dụng một yếu tố input, để tác dụng tương tự.

Trả lời

12

Bạn có thể đặt lớp phủ trong suốt lên nút và đặt chú giải công cụ trên đó.

http://jsfiddle.net/yL2wN/

<div id="wrapper"> 
    <div id="overlay"></div>     
    <button disabled>BUTTON</button> 
</div> 

#wrapper{ 
    position: relative; 
} 
#overlay{ 
    position: absolute;   
    top: 0; 
    left: 0; 

    opacity: .1; 
    height: 20px; 
    width: 70px; 
}​ 

Trong fiddle, tôi đặt màu xanh chỉ để bạn có thể xem những gì đang xảy ra. Chiều rộng và chiều cao của lớp phủ có thể được điều chỉnh khi cần hoặc được tạo động trong js.

+0

Ngay cả khi gói nó với một div, nút được "nuốt" di chuột ... –

+0

Thú vị, trả lời được cập nhật. –

2

Một giải pháp khả thi là để làm cho nó sẵn sàng chỉ:

<button id="disabledbutton" readonly="readonly">Disabled Button</button> 

Sau đó thay đổi css để tìm khuyết tật và ghi đè lên onclick để ngăn chặn bất kỳ hành động: Hướng dẫn

$('#disabledbutton').click(function() { return false; }); 
0

Thực hiện theo James, tôi có đã thử như thế này

<div id="wrapper"> 
<button id='overlay'>BUTTON</button> 
<button disabled>BUTTON</button></div> 

#overlay{ 
position: absolute; 
opacity: 0;} 

Tôi đặt nút giả với cùng văn bản ở phía trước cũ nd đặt id cho nó. Trong css, tôi thiết lập vị trí để cho nút mới này trở nên tương đối với trình bao bọc, để nút mới này sẽ được đặt trong cùng một không gian với nút bị vô hiệu hóa.

Đây là fiddle tôi: http://jsfiddle.net/p2j041Ln/

1

Add 'ui-nút khuyết tật' và 'ui-state-disabled' lớp vì vậy nó sẽ trông giống như một nút khuyết tật và kiểm tra các trong hàm nhấp chuột để xác định nhà nước. Xóa chúng khi bạn cần giao diện được bật.

1

này có thể giúp

<style> 
.btn{ 
    padding: 0 !important; // or get padding size of .btn 
} 

.button{ 
    padding: 8px 30px 6px; 
} 
</style> 

<body> 
<button type="submit" id="submit_form" class="btn" disabled/> 
    <div class="button">Submit</div> 
</button> 

<script> 
    $('.button').hover(function(){ 
    // place code here 
    }); 
</script> 
</body> 
Các vấn đề liên quan