复选框依赖项JavaScript

时间:2019-03-19 07:17:28

标签: javascript jquery

我的工作是实施目录。它包含大约100个复选框。这些相互依赖。 例如:如果选中ID = 4的复选框,则必须禁用ID = 56和ID = 27的复选框。

是否存在实现此目的的框架或类似的东西?

谢谢!

1 个答案:

答案 0 :(得分:1)

我不知道是否有用于此的js模块,但是您可以通过创建映射并禁用复选框来尝试以下方法。

var checkboxMap = {
  "4": [56, 27]
}

function disableCheckboxes(id) {
  for (i in checkboxMap[id]) {
    document.getElementById(checkboxMap[id][i]).disabled = true;
  }
}

var checkboxes = document.getElementsByClassName("checkbox")

//adding event listener

for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("change", function(e) {
    if (e.target.checked) {
      disableCheckboxes(e.target.id);
    }
  })
}
<label for="4">id: 4
<input type="checkbox" id="4" class="checkbox" />
</label>

<label for="56">id: 56
<input type="checkbox" id="56" class="checkbox" />
</label>

<label for="27">id: 27
<input type="checkbox" id="27" class="checkbox" />
</label>