activation et désactivation de la saisie de texte sur la case à cocher cochée et non cochée

Question

J'ai une case à cocher et une entrée de texte

Ce dont j'ai besoin, c'est d'activer la saisie de texte lorsque je coche la case et de désactiver la saisie de texte lorsque je décoche la case.

J'utilise le code suivant mais il fait l'inverse : activer quand il n'est pas coché / désactiver quand il est coché. Comment l'adapter à mes besoins ?

<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
<script>
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').enabled = this.checked;
};
</script>

toute aide ~ merci

Answer 1

Il suffit d'ajouter un ! devant this.checked .

Voici un exemple qui montre le changement :

document.getElementById('yourBox').onchange = function() {
    document.getElementById('yourText').disabled = !this.checked;
};

<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />

Answer 2

Une solution jQuery pourrait être celle-ci :

<script>
$('#yourBox').change(function() {
    $('yourText').attr('disabled',!this.checked)
});
</script>

C'est la même réponse que celle de Minko mais je la trouve plus élégante.

Answer 3

Essayez-le. Si vous utilisez une étiquette, ajoutez-y un onmousedown.

<form >
  <input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" onmousedown="this.form.yourText.disabled=this.checked"/>
 </form>

Answer 4

Une meilleure solution pourrait être :

var checkbox = document.querySelector("#yourBox");
var input = document.querySelector("#yourText");

var toogleInput = function(e){
  input.disabled = !e.target.checked;
};

toogleInput({target: checkbox});
checkbox.addEventListener("change", toogleInput);

<input type="checkbox" id="yourBox">
<input type="text" id="yourText">

Answer 5

function createInput( chck ) {
    if( jQuery(chck).is(':checked') ) {
        jQuery('<input>', {
            type:"text",
            "name":"meta_enter[]",
            "class":"meta_enter"
        }).appendTo('p.checkable_options');
    }
    else {
        jQuery("input.meta_enter").attr('disabled','disabled');
    }        
}
createInput( chck );

<input type="radio" name="checkable" class="checkable" value="3" />
<input type="radio" name="checkable" class="checkable" value="4" onclick="createInput(this)" />