Question

我有：

 <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';
    } 
});

我认为当我取消选中该复选框时，该课程只会“只读”。将在代码执行时删除，只有当我勾选复选框时if条件为真。我似乎无法摆脱if条件，所以要在click和unlick之间切换。我怎样才能做到这一点？

由于

Answer 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;
  }
});

Answer 2

试试这个。

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");    
  }
});

Answer 3

试试这个

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

取消选中复选框

3 个答案: