doppio clic disabilitato casella di selezione per abilitare

Question

Sto cercando di permettere a tutti i form doppio click del modulo, e hanno semplificato il codice come segue:

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

Tuttavia, l'evento modulo doppio click non si attiva mentre si posiziona il mouse sopra l'elemento disattivato <select>. E sfortunatamente, lo "readonly" attribute non funziona sugli elementi <select>.

Questo è per un'applicazione interna e ho solo bisogno della funzione su Google Chrome.

UPDATE:

sto ricevendo un sacco di risposte su questo, e penso che ho bisogno di rivedere la mia domanda per aiutare a guidare il processo di ... Che cosa significa la specifica W3C sui disabili elementi del modulo dire? ... Sembra che l'evento doppio clic non attivi sugli elementi <input> disattivati ​​in Firefox, ad esempio. Forse il fatto che funzioni in Chrome è un bug/disallineamento con specifiche che non posso contare sul fatto di essere sempre lì.

Al momento, guardando per l'evento doppio clic su un elemento di involucro posizionato in modo assoluto sopra il modulo sembra che l'opzione migliore ... anche se io odio l'aggiunta di elementi involucro in più.

Answer 1

Si potrebbe usare che:

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

Vorrei suggerire mettere un div sovrapponendo l'intero form e inserire il gestore di clic su questo. I campi disattivati ​​non attivano i gestori dei clic.

Answer 3

Prova questo:

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

Live Demo:

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

(Basta fare doppio clic sul div rosso e dare un'occhiata).