revenir à l'état initial lorsque la case Décochez

Question

J'ai:

<label><input type="checkbox" name="all"> text</label> 
<label><input type="checkbox" name="js-frameworks"> text</label> 

const all = document.getElementsByName('all')[0]; 
const jsFrameworks = document.getElementsByName('js-frameworks')[0]; 

this.addEventListener("change", function() { 
    if (all.checked) { 
    jsFrameworks.parentNode.className = 'readonly'; 
    } 
}); 

Je pensais que quand je décochez la case sera supprimé la classe « readonly » que le code exécute seulement quand je coche la case à cocher donnant le si la condition est vraie. Je ne peux pas sembler échapper à la condition if, de sorte à basculer entre le clic et décocher. Comment puis je faire ça?

Merci

Answer 1

Modifier cette façon:

this.addEventListener("change", function() { 
    if (all.checked) { 
    jsFrameworks.parentNode.className = 'readonly'; 
    } else { 
    jsFrameworks.parentNode.className = ''; 
    } 
}); 

De cette façon, vous supprimez la classe quand décochée.

MISE À JOUR:

Ou vous pourriez économiser les classes que votre élément peut avoir avant:

let classesBefore = jsFrameworks.parentNode.className; 
this.addEventListener("change", function() { 
    if (all.checked) { 
    jsFrameworks.parentNode.className = classesBefore + ' readonly'; 
    } else { 
    jsFrameworks.parentNode.className = classesBefore; 
    } 
}); 

Answer 2

Essayez cette

this.addEventListener("click", function() { 
    this.parentNode.toggle('readonly'); 
} 

Answer 3

Essayez ceci.

const all = document.getElementsByName("all")[0]; 
const jsFrameworks = document.getElementsByName("js-frameworks")[0]; 

this.addEventListener("change", function() { 
    if (all.checked) { 
    jsFrameworks.parentNode.classList.add("readonly"); 
    } else if (!all.checked) { 
    jsFrameworks.parentNode.classList.remove("readonly");  
    } 
});