2011-02-11 28 views
9

¿Cómo desactivar y activar adecuadamente los elementos de formulario utilizando jQuery. Necesito deshabilitar el elemento de formulario de texto cuando hago clic en Seleccionar. Y viceversa.Activar o desactivar los elementos de formulario en jQuery

<html> 
    <head> 
    <script src="jq.js"></script> 
    <script> 

    $(function(){ 

    $('#fromdate').click(function(){ 
     $('#yosh').attr('disabled','disabled'); 
     $('#fromdate').removeAttr('disabled'); 
    }); 

    $('#yosh').click(function(){ 
     $('#yosh').removeAttr('disabled'); 
     $('#fromdate').attr('disabled','disabled'); 
    }); 

    }); 
    </script> 

    </head> 
    <body> 
    Sort by: 
    <select name="yosh" id="yosh"> 
    <option value="daily">daily</option> 
    <option value="weekly">yesterday</option> 
    <option value="weekly">weekly</option> 
    <option value="monthly">monthly</option> 
    <option value="yearly">yearly</option> 

    </select><br/> 
    date range:<br/> 

    From:<input type="text" value="" name="fromdate" id="fromdate"></input><br/> 
    To:<input type="text" value="" name="todate" id="todate"></input><br/> 


    Customer:<input type="text" value="" name="customer" id="customer"></input> 

    </body> 

    </html> 
+0

Creo que este código debería funcionar ... ¿Tiene algún error con este código? – Vivek

+1

El problema con este enfoque es que no puede hacer clic en un elemento una vez que está deshabilitado. Lo que puede hacer es envolver las cajas de selección y de texto con un palmo o div y activar/desactivar las cajas de selección/texto con el evento mouseover del tramo o div. –

+0

Es necesario activar hacerlo, añada casilla de verificación o un botón para permitir que todos –

Respuesta

17

ejemplo de lo que he escrito en el comentario:

<span id="spnSel"> 
    <select name="yosh" id="yosh"> 
     <option value="daily">daily</option> 
     <option value="weekly">yesterday</option> 
     <option value="weekly">weekly</option> 
     <option value="monthly">monthly</option> 
     <option value="yearly">yearly</option> 
    </select> 
</span> 

Añadir este evento:

$('#spnSel').mouseover(function() { 
    $('#yosh').prop('disabled', false); 
}); 

Usted puede hacer esto por los cuadros de texto también. Esta puede no ser la mejor solución/enfoque pero hará el trabajo.

+0

la ': Entrada de' selector viene muy bien, para no ir demasiado amplia dentro de una forma ... (sí a partir de dos puntos, no la etiqueta general, para atrapar también área de texto, etc.) –

-1

$('#fromdate').disabled = false

+0

lo siento, he usado el mal 'attribute' - esto se corrige ahora muchas gracias –

+0

Eso todavía no va a funcionar, necesita el objeto DOM nativa, justo ataca '[0]' al final de tu función '$()' para obtenerlo. – alex

+0

.. Usted evento tiene un comentario en la fijación de su solución por lo que era viable, y que todavía no ha cambiado? $ ('# fromdate') [0] .disabled = false; ... –

13

la sintaxis es

$('formelement').attr('disabled',true); 

o para volver a habilitar

$('formelement').removeAttr('disabled'); 
+0

¿No puedo usar el selector de ids? –

+0

yes.you puede .... – Vivek

+0

creo que no puede capturar el evento de clic una vez que se desactiva, ¿cómo hago para eso. –

2

interesará ...

<script> 

    $(function(){ 

    $('#fromdate').click(function(){ 
     $('#yosh').attr('disabled',true); 
     $('#fromdate').removeAttr('disabled'); 
    }); 

    $('#yosh').click(function(){ 
     $('#yosh').removeAttr('disabled'); 
     $('#fromdate').attr('disabled',true); 
    }); 

    }); 
    </script> 
0

que probar el código y tengo conclusión de que no se puede agregar evento mientras que el elemento está desactivado, por lo que tiene que utilizar el gatillo ...

DEMO

Cuestiones relacionadas