Désactiver l'affichage d'un champ de texte avec une case à cocher

Question

Lorsque la case Unlimited est cochée, supprimez la zone de saisie. Ça marche. Cependant, lorsque la case n'est pas cochée, la boîte de saisie ne sera pas affichée.

<script type="text/javascript"> 
    function getQuantity() { 
     var checkbox = document.getElementById("unlimited"); 
     var qty = document.getElementById("quantityspace"); 
     if(checkbox.checked == true){ 
      qty.style.display = 'none'; 
     }else if(checkbox.checked == false) { 
      qty.stlye.display = '<input type="text" id="quantity" size="4" value="1" name="quantity" />'; 
     } 
    } 
</script> 

<input type="checkbox" id="unlimited" name="unlimited" value="x" onClick="getQuantity(); " /> Unlimited? <span id="quantityspace">or specify: 
<input type="text" id="quantity" size="4" value="1" name="quantity" /></span> 

Answer 1

qty.stlye.display = '<input type="text" id="quantity" 
size="4" value="1" name="quantity" />'; 

devrait être:

qty.style.display = 'inline'; // or block 

display est une propriété de la balise d'entrée déjà existante. Vous n'avez pas besoin d'affecter la totalité de l'étiquette à la propriété pour la faire apparaître à nouveau - en fait, c'est complètement faux. Affectez simplement à cette propriété une nouvelle valeur valide pour l'affichage, comme inline, inline-block ou block et elle apparaîtra à nouveau.

Answer 2

Dans votre vous avez:

qty.stlye.display 

Voulez-vous dire style?

De plus, vous définissez incorrectement l'attribut d'affichage. Ce devrait être un valid value. Vous voulez sans doute qu'il soit:

else if(!checkbox.checked) { 
    qty.style.display = 'inline'; // or something from the W3C link above 
} 

Answer 3

Est-il juste que vous avez mal orthographié « qty.stlye.display »?

Answer 4

Modifier la ligne qty.stlye.display à:

qty.style.display = ""; 

Notez que vous avez mal orthographié "style" là.

Answer 5

Vous avez mal orthographié "style" en tant que "stlye" et vous définissez le style d'affichage au format HTML pour une raison quelconque. Il devrait être 'inline' ou 'block' ou quoi que ce soit avant de le mettre à 'none'.

Answer 6

Je pense que ce que vous voulez est le suivant:

function getQuantity() { 
    var checkbox = document.getElementById("unlimited"); 
    var qty = document.getElementById("quantityspace"); 
    if(checkbox.checked == true){ 
     qty.innerHTML = ''; 
    }else if(checkbox.checked == false) { 
     qty.innerHTML = '<input type="text" id="quantity" size="4" value="1" name="quantity" />'; 
    } 
} 

Si je ne me trompe pas, vous voulez mettre une entrée dans l'élément quantityspace lorsque la case est pas cochée.

qty.style.display modifie la propriété CSS display de l'étendue. qty.innerHTML modifie le code HTML dans l'intervalle.

Vous pouvez le faire avec .style.display avec le code suivant:

function getQuantity() { 
    var checkbox = document.getElementById("unlimited"); 
    var qty = document.getElementById("quantityspace"); 
    if(checkbox.checked == true){ 
     qty.style.display= 'none'; 
    }else if(checkbox.checked == false) { 
     qty.style.display= 'inline'; 
    } 
}