2010-09-27 5 views
11

J'ai une case à cocher et si je coche Je veux un champ de texte pour devenir activé (désactivé par défaut) et quand je Décochez la case à cocher la Je veux qu'elle devienne à nouveau désactivé.élément Désactiver/activer avec case à cocher et jQuery?

J'ai vu ici jQuery Checkboxes comment je peux basculer une classe CSS et ici http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_disable.2Fenable_a_form_element.3F comment je peux basculer entre activé et désactivé avec deux boutons. Mais comment activer/désactiver un champ de texte désactivé/cocher une case?

Merci d'avance.

Répondre

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

crazy demo

+1

Je pense que vous voulez que le changement gestionnaire, qui se déclenchera même si l'utilisateur clique sur une étiquette associée à la case à cocher. –

+0

http://jsfiddle.net/FArMm/1/ mis à jour par exemple de Reigel. – Tim

+0

@Rao - si vous êtes l'étiquette du préoccupant, consultez [folle demo 2] (http://jsfiddle.net/FArMm/2/) – Reigel

6

Vous pouvez joindre le gestionnaire de changement sur la case à cocher et activer/désactiver le champ de texte avec sa propriété checked.

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

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

0

Voici une page qui fait ce que vous cherchez - il est assez minime, mais montre ce dont vous avez besoin

<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 - pour supprimer le texte dans les zones de texte qui devient désactivé et décocher la case à cocher s qui devient invalide - il suffit d'ajouter cette ligne

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

et de décocher la case à cocher, vous devez attribuer un nom d'identification à la case puis ajoutez cette ligne à la Jquery

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

Hope this helps quelqu'un ... bien que je réponds à la question de Martins après 2 ans depuis sa publication :-)

0

Depuis jQuery 1.6, la méthode .prop() doit être utilisée pour définir désactivé et vérifié au lieu de la méthode .attr():

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

afficher et masquer une zone de texte (# otherSection2) pour saisir d'autres options lors de la dernière case à cocher dans un tableau rendu (#CheckBoxListList) de asp: contrôle CheckBoxList est sélectionné

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

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

       } 
      });