вернуться в исходное состояние при снятии флажка

1

Я имею:

 <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. Как я могу это сделать?

Спасибо

Теги:
if-statement
click
checkbox
toggle

3 ответа

1

Измените это так:

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;
  }
});
Поделиться
  • 0
    Хотя это работает для этой ситуации, следует отметить, что это удалит любые другие классы, которые могут быть в parentNode.
0

Попробуй это.

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");    
  }
});
Поделиться
  • 0
    Почему он должен попробовать это? Объясните, в чем была проблема и как вы ее исправили.
  • 0
    Вы должны просто использовать else , так как !all.checked - единственная другая возможность.
Показать ещё 6 комментариев
-2

Попробуй это

this.addEventListener("click", function() {
    this.parentNode.toggle('readonly');
}
Поделиться
  • 0
    Я попытался classList.toggle (), но он удаляет класс каждый раз, когда я выбираю флажок, где я хочу удалить класс, когда я отменяю его выбор. Решение Merunas работает лучше, хотя я искал более эффективный способ сделать это, чем использовать другое
  • 0
    toggle() - это функция jQuery, предназначенная для сокрытия и отображения элемента; toggleClass() для изменения класса. Но он не использует jQuery.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню