2011-05-05 3 views
0

Dans ce qui suit, j'utilise filter ('input: text, textarea') pour définir les champs de saisie en lecture seule (et les rendre opaques). Toutefois, ce sélecteur sélectionne uniquement les entrées de texte et non la zone de texte. Qu'est-ce que je fais mal?pourquoi ce sélecteur jquery ne sélectionne pas textarea?

<!DOCTYPE html> 
<html> 
    <head> 
    <title>setReadOnly() Test</title> 
    <link rel="stylesheet" type="text/css" href="../styles/core.css"> 
    <link rel="stylesheet" type="text/css" href="test.setReadOnly.css"> 
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script> 
    <script type="text/javascript" src="../scripts/jqia2.support.js"></script> 
    <script type="text/javascript"> 
     (function($){ 
      $.fn.setReadOnly = function(readonly) { 
      return this.filter('input:text,textarea') 
       .attr('readOnly',readonly) 
       .css('opacity', readonly ? 0.5 : 1.0) 
       .end(); 
      }; 
     })(jQuery); 
    </script> 
    <script type="text/javascript"> 
     $(function(){ 
     $('#sameAddressControl').click(function(){ 
      var same = this.checked; 
      $('#billAddress').val(same ? $('#shipAddress').val():''); 
      $('#billCity').val(same ? $('#shipCity').val():''); 
      $('#billState').val(same ? $('#shipState').val():''); 
      $('#billZip').val(same ? $('#shipZip').val():''); 
      $('#bill_random_field').val(same ? $('#ship_random_field').val():''); 
      $('#billingAddress input').setReadOnly(same); 
     }); 
     }); 
    </script> 
    </head> 

    <body> 

    <div data-module="Test setReadOnly()"> 

     <form name="testForm"> 
     <div> 
      <label>First name:</label> 
      <input type="text" name="firstName" id="firstName"/> 
     </div> 
     <div> 
      <label>Last name:</label> 
      <input type="text" name="lastName" id="lastName"/> 
     </div> 
     <div id="shippingAddress"> 
      <h2>Shipping address</h2> 
      <div> 
      <label>Street address:</label> 
      <input type="text" name="shipAddress" id="shipAddress"/> 
      </div> 
      <div> 
      <label>City, state, zip, random_field:</label> 
      <input type="text" name="shipCity" id="shipCity"/> 
      <input type="text" name="shipState" id="shipState"/> 
      <input type="text" name="shipZip" id="shipZip"/> 
      <textarea name="random_field" rows="2" cols="20" id="ship_random_field"></textarea> 
      </div> 
     </div> 
     <div id="billingAddress"> 
      <h2>Billing address</h2> 
      <div> 
      <input type="checkbox" id="sameAddressControl"/> 
      Billing address is same as shipping address 
      </div> 
      <div> 
      <label>Street address:</label> 
      <input type="text" name="billAddress" 
        id="billAddress"/> 
      </div> 
      <div> 
      <label>City, state, zip, random_field:</label> 
      <input type="text" name="billCity" id="billCity"/> 
      <input type="text" name="billState" id="billState"/> 
      <input type="text" name="billZip" id="billZip"/> 
      <textarea name="random_field" rows="2" cols="20" id="bill_random_field"></textarea> 
      </div> 
     </div> 
     </form> 
    </div> 

    </body> 
</html> 

Répondre

2

Essayez de changer la ligne $('#billingAddress input').setReadOnly(same); à $('#billingAddress input,textarea').setReadOnly(same);

Mise à jour

En fait, doit être comme vous avez dit dans le commentaire: .

+0

intéressant, cela n'a pas fonctionné mais en le changeant en '$ ('# billingAddress input, # billingAddress textarea'). SetReadOnly (même);' a travaillé. Je suis perplexe pourquoi votre suggestion n'a pas fonctionné. – jela

+0

La suggestion n'a pas fonctionné car vous essayez de filtrer l'élément lui-même, pas le contenu. Au lieu de cela, vous pouvez essayer '$ ('# billingAddress'). Find ('*'). SetReadOnly (même)', ou réécrire votre filtre pour faire 'this.find ('*') ..'. – Shagglez

+0

Désolé, j'ai oublié de mettre 'input, textarea' – Tulio

Questions connexes