2010-09-27 25 views
11

Tengo una casilla de verificación y si la selecciono quiero que se habilite un campo de texto (deshabilitado como predeterminado) y cuando desactivo la casilla de verificación, quiero que vuelva a deshabilitarse.¿Deshabilitar/habilitar elemento con casilla de verificación y jQuery?

Vi aquí jQuery Checkboxes cómo puedo alternar una clase CSS y aquí http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_disable.2Fenable_a_form_element.3F cómo puedo cambiar entre habilitado y deshabilitado con dos botones. ¿Pero cómo puedo alternar un estado de los campos de texto deshabilitado/habilitado marcando/desmarcar una casilla de verificación?

Gracias de antemano.

Respuesta

33
$(':checkbox').click(function(){ 
    $('input:text').attr('disabled',!this.checked) 
}); 

crazy demo

+1

Creo que desea que el cambio controlador, que se activará incluso si el usuario hace clic en una etiqueta asociada con la casilla de verificación. –

+0

http://jsfiddle.net/FArMm/1/ ejemplo actualizado de Reigel. – Tim

+0

@Rao: si le preocupa la etiqueta, consulte [demo loca 2] (http://jsfiddle.net/FArMm/2/) – Reigel

6

Puede adjuntar el controlador de cambios en la casilla de verificación y habilitar/deshabilitar el campo de texto con su propiedad checked.

$('#theCheckbox').change(function() { 
    $('#theTextfield').attr('disabled', this.checked); 
}); 

Ejemplo: http://jsbin.com/oludu3/2

0

Aquí hay una página que hace lo que está buscando - que es bastante escaso, pero muestra lo que necesita

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script> 
     <script> 
      $(document).ready(function() { 
       $("#testcheckbox").change(function() { 
        $("#testtextfield").attr("disabled", $(this).attr("checked")); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <input type="checkbox" id="testcheckbox" /> 
     <input type="text" id="testtextfield" /> 
    </body> 
</html> 
1

@ Martin: para eliminar el texto en los cuadros de texto que se desactiva y desmarcar la casilla de verificación s que se incapacita - sólo tiene que añadir esta línea

$("#TextField_ID_name").val(""); 

y desactive la casilla de verificación, es necesario asignar nombre de identificación a la casilla de verificación y luego añadir esta línea a la Jquery

$("#chekcbox_ID_name").attr('checked',false) 

Espero que esto ayude alguien ... aunque estoy respondiendo a la pregunta de Martins después de 2 años desde su publicación :-)

0

Desde jQuery 1.6, el método .prop() se debe utilizar para desactivar y marcar el método en lugar del .attr() método:

$('#theCheckbox').change(function() { 
    $('#theTextfield').prop('disabled', this.checked); 
}); 
0

mostrar y ocultar un cuadro de texto (# otherSection2) para la introducción de otras opciones cuando la última casilla de verificación en una tabla rendido (#CheckBoxListList) de ASP: Control CheckBoxList se selecciona

$("#CheckBoxListList input[type='checkbox']:last").on("click", function() { 

       if ($(this).is(":checked")) { 
        $("#otherSection2").show(); 
       } else { 
        $("#otherSection2").hide().find("input").val(null); 

       } 
      }); 
Cuestiones relacionadas