Я имею:
<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';
}
});
Я думал, что когда я сниму флажок, класс "readonly" будет удален, так как код будет выполняться только тогда, когда я поставлю галочку, указав условие if is true. Кажется, я не могу избежать условия if, поэтому для переключения между щелчком и unclick. Как я могу это сделать?
Спасибо
Измените это так:
this.addEventListener("change", function() {
if (all.checked) {
jsFrameworks.parentNode.className = 'readonly';
} else {
jsFrameworks.parentNode.className = '';
}
});
Таким образом вы удаляете класс, если его не снимаете.
ОБНОВИТЬ:
Или вы можете сохранить классы, которые ваш элемент может иметь до:
let classesBefore = jsFrameworks.parentNode.className;
this.addEventListener("change", function() {
if (all.checked) {
jsFrameworks.parentNode.className = classesBefore + ' readonly';
} else {
jsFrameworks.parentNode.className = classesBefore;
}
});
Попробуй это.
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");
}
});
else
, так как !all.checked
- единственная другая возможность.
Попробуй это
this.addEventListener("click", function() {
this.parentNode.toggle('readonly');
}
toggle()
- это функция jQuery, предназначенная для сокрытия и отображения элемента; toggleClass()
для изменения класса. Но он не использует jQuery.