时间戳

首页 > 解决方案 > 使用 JavaScript 启用或禁用多个复选框而不是列出所有复选框的有效方法？

javascript - 使用 JavaScript 启用或禁用多个复选框而不是列出所有复选框的有效方法？

问题描述

我想知道是否有更好的方法来一次启用/禁用多个复选框。在 html 中，我有两个单选按钮可以在所有头发选项和自定义头发选项之间进行选择，默认所有选项都禁用复选框，而自定义选项则启用它们。
到目前为止，这就是我所拥有的（可能看起来很愚蠢，我很抱歉），但我想知道是否有更有效的方法来解决这个问题？为了我自己，我想尽可能“小”地做到这一点，同时仍然易于阅读/理解。

function checkHaOp(){
    if (document.getElementById("hairOptionAll").checked){
        document.getElementById("hairAuburn").disabled = true;
        document.getElementById("hairBlack").disabled = true;
        document.getElementById("hairBlonde").disabled = true;
        document.getElementById("hairBrown").disabled = true;
        document.getElementById("hairRed").disabled = true;
        document.getElementById("hairOther").disabled = true;
    } 
    else if (document.getElementById("hairOptionCustom").checked){
        document.getElementById("hairAuburn").disabled = false;
        document.getElementById("hairBlack").disabled = false;
        document.getElementById("hairBlonde").disabled = false;
        document.getElementById("hairBrown").disabled = false;
        document.getElementById("hairRed").disabled = false;
        document.getElementById("hairOther").disabled = false;
    }
}

最好使用javascript，因为我不知道jquery。
由于我仍在学习，因此我也很感激对事物的解释。

标签： javascript

解决方案

你可以添加/使用像@NiettheDarkAbsol 这样的类然后类似的东西。

var inpck = document.getElementsByClassName("input-checkbox");
if (document.getElementById("hairOptionAll").checked) {
    for(var i = 0; i < inpck.length; i++) {
       inpck[i].disabled = true;
    }
}
if (document.getElementById("hairOptionCustom").checked) {
    for(var i = 0; i < inpck.length; i++) {
       inpck[i].disabled = false;
    }
}

现在轮到你重构这个了：D

推荐阅读