2011-07-21 18 views
8

totalmente un novato ... sólo quiero saber cómo desactivar dinámicamente un campo de entrada cuando el segundo campo de entrada se llenaDesactivar un campo de entrada si el campo está vacío segunda entrada

por ejemplo:

<td><input type="text" name="num-input1" id="dis_rm" value=""></input></td> 
<td><input type="text" name="num-input2" id="dis_per" value="" ></input></td> 

pls ... cualquier vínculos y las indirectas va a hacer ...

+0

medios llenos después de escribir datos en el segundo campo de entrada y pulse en otro lugar en la solicitud ?? –

+0

sí ... después de que la segunda entrada se completa automáticamente, la primera se deshabilita ... ¿cómo? :( – debrajsy

+0

puede utilizar el evento onchange o el onkeydown para detectar cambios en el campo de entrada. Vea mi respuesta a continuación – Ibu

Respuesta

9

Usted sólo tendrá que darle un discapacitado propiedad:

document.getElementById("dis_rm").disabled = true; 
document.getElementById("dis_per").disabled = true; 

puede utilizar el evento on cambio para ver si uno de ellos está lleno:

var dis1 = document.getElementById("dis_rm"); 
dis1.onchange = function() { 
    if (this.value != "" || this.value.length > 0) { 
     document.getElementById("dis_per").disabled = true; 
    } 
} 

por lo que si el primero está lleno, el segundo se desactivará

+0

Puede todo lo que use el evento onkeydown para ver si alguno de ellos está vacío o no – Ibu

+0

violín pls ibu ... parece que no puedo hacerlo bien – debrajsy

+0

@debrajsy aquí está trabajando [Fiddle] (http://jsfiddle.net/9fSAj /) de mi código. cuando llena un campo, el otro está deshabilitado, cuando lo borra, todo vuelve a la normalidad – Ibu

0

establecer el indicador disabled en el campo Desea deshabilitar cuando se desencadena el evento OnBlur (para salir del campo) o cuando se activa el evento OnChanged (con, por supuesto, la validación del cambio).

1
$('#secondinput').live('blur',function(){ 

    $('#firstinput').attr('disabled', true); 

}); 

tihs funciona cuando se llenó el segundo campo de entrada y haga clic en otro lugar ..........

2
$('#dis_per').blur(function(){ 
    if($(this).val().length != 0){ 
     $('#dis_rm').attr('disabled', 'disabled'); 
    }  
}); 

http://jsfiddle.net/jasongennaro/D7p6U/

Explicación:

  1. cuando la segunda entrada pierde el foco ... .blur()

  2. compruebe si tiene algo dentro. Para ello, asegurándose de que su longitud no es cero !=0

  3. si tiene algo en ella, añadir el attributedisabled y ponerlo a disabled

0

Sólo anuncio esto a su cuadro de texto segundo:

onblur="document.getElementById('dis_rm').disabled = (''!=this.value);" 

http://jsfiddle.net/vbKjx/

0

podemos ommit algunos pasos, refiriéndose a la forma como se objeto.

document.form1.num-input2.onchange = function() { 
    if (this.value != "" || this.value.length > 0) { 
     document.form1.num-input1.disabled = true; 
    } 
} 
0

me gusta esta respuesta, usando jQuery:

$('#seconddiv').live('focus',function(){ 
    $('#firstdiv').attr('disabled', true); 
}); 

tengo una barra de búsqueda que ofrece resultados de búsqueda con cada pulsación de tecla, si no devuelve ningún resultado, entonces el usuario se presenta con una forma de pedir ayuda. Pero si completan el "formulario de solicitud" y luego vuelven a escribir en la barra de búsqueda, borrará todo lo que ingresaron en el formulario de solicitud. Entonces, para resolver esto, di todas las entradas en el formulario de solicitud, una identificación de "segundo div" y el campo de búsqueda id = "firstdiv". Ahora, si hacen clic o tabulan en uno de los campos de entrada del formulario preguntar, se deshabilitarán para buscar en la barra para que sus datos nunca se escriban en exceso.

También agregaré un botón que volverá a habilitar el formulario de búsqueda si cambian de opinión.

Y para los novatos - puse el código en la cabecera del documento de la siguiente manera:

<html> 
<head> 
<script type="text/javascript"> 
$('#seconddiv').live('focus',function(){ 
    $('#firstdiv').attr('disabled', true); 
}); 
</script> 
</head> 
<body> 
.... 
Cuestiones relacionadas