Podwójne kliknięcie wyłączona wybierz opcję, aby umożliwić

Question

Próbuję włączyć wszystkie elementy formularza na podwójnym kliknięciem formie i uprościły kod w następujący sposób:

<form> 
    <input type="text" name="foo" disabled /> 
    <select name="bar" disabled> 
     <option>a</option> 
     <option>b</option> 
    </select> 
</form> 

<script type="text/javascript"> 
    $(function() { 
     $('form').dblclick(function() { 
      $(this).find('input,select').removeAttr('disabled'); 
     }); 
    }); 
</script> 

Jednak zdarzenie forma podwójne kliknięcie nie ognia podczas unoszenia nad wyłączonym elementem <select>. I niestety, "readonly" attribute nie działa na elementach <select>.

Jest to aplikacja wewnętrzna i potrzebuję jej tylko w Google Chrome.

UPDATE:

Dostaję kilka odpowiedzi na to i myślę, że muszę zmienić moje pytanie, które pomogą prowadzić proces ... Co W3C specyfikację elementów formularza na niepełnosprawnych mówić? ... Wygląda na to, że zdarzenie z podwójnym kliknięciem nie uruchamia się na przykład na wyłączonych elementach <input> w Firefoksie. Być może to, że uruchamia się w Chrome, to błąd/niewspółosiowość w specyfikacji, na którą nie mogę liczyć.

W tej chwili oglądanie zdarzenia podwójnego kliknięcia na całkowicie umieszczonym elemencie opakowania powyżej formularza wydaje się najlepszą opcją ... mimo że nie cierpię dodawania dodatkowych elementów opakowania.

Answer 1

Można użyć tego:

DEMO

$(function() {  
    $('form').dblclick(function() { 
     $(this).find('input,select').removeProp('disabled').removeClass('no-pointer'); 
    }).find(':input').addClass('no-pointer'); 
}); 

CSS:

.no-pointer{pointer-events:none} 

Answer 2

Sugerowałbym umieszczenie div nakładającego się na cały formularz i umieszczenie na nim obsługi kliknięcia. Wyłączone pola nie uruchamiają programów do obsługi kliknięć.

Answer 3

Spróbuj:

HTML:

<div id="wrapper"> 
    <form> 
     <input type="text" name="foo" disabled/> 
     <select name="bar" disabled> 
      <option>a</option> 
      <option>b</option> 
     </select> 
    </form> 
</div> 

jQuery:

$('#wrapper').dblclick(function() { 
    $('form').find('input, select').prop('disabled', false); 
}); 

żywo Demo:

http://jsfiddle.net/oscarj24/TvBR6/3/

(Wystarczy dwukrotnie kliknąć na czerwony div i spojrzeć).