无法读取未定义的属性“0”——JavaScript

Question

我的目标：选中复选框后，启用相关元素。

这是我的 JavaScript。据我了解，this 是输入。因此，调用parentNode 将上升到checkbox div。然后我设置parent_1，即col-md-3 div。然后我将child 设置为parent_1 的下一个兄弟，即下一个col-md-3 div。但我得到了错误

Uncaught TypeError: Cannot read property '0' of undefined 

错误位置是输入。

function selectElement(object) {
    var parent = object.parentNode;
    var parent_1 = parent.parentNode;
    var child = parent_1.nextSibling;
    if (parent.children[0].checked == true) {
        child.children[0].disabled = false;
    } 
    else {
        child.children[0].disabled = true;
    }
}

这是我的 HTML：

<div class="col-md-3">
    <div class="checkbox checkbox-primary">
        <input type="checkbox" id="fast_dd" onClick="selectElement(this);">
        <label for="fast_dd">Anomalies</label>
    </div>
</div>
<div class="col-md-3">
    <select name="fast" class="selectpicker" disabled>
        <option>Options</option>
    </select>
</div>

编辑 - 完全不知道为什么我写了parent.children[0] 而不仅仅是object，我很笨拙

编辑 2 - 将标题更改为更准确

Answer 1

你快到了。

你想要的是获取下一个元素，不一定是下一个 DOM 节点（即文本节点）。

改用这个 JS：

function selectElement(object) {
    var parent = object.parentNode;
    var parent_1 = parent.parentNode;
    var child = parent_1.nextElementSibling; //nextElementSibling instead of nextElement
    if (object.checked == true) { // use object instead of parent.children
        child.children[0].disabled = false;
    } 
    else {
        child.children[0].disabled = true;
    }
}

这是一个小提琴：http://jsfiddle.net/1hzmwd7w/2/

Answer 2

var isClassMember = function (element, classname) {
    var classes = element.className;
    if (!classes) {
        return false;
    };
    if (classes == classname) {
        return true;
    };
    var whitespace = /\s+/;
    if (!whitespace.test(classes)) {
        return false;
    };
    var c = classes.split(whitespace);
    for (var i = 0; i < c.length; i++) {
        if (c[i] == classname) {
            return true;
        };
    };
    return false;
};
var getElements = function (classname, tagname, root, firstFlag, depth) {
    if (!root) {
        root = document;
    }
    else {
        if (typeof root == "string") {
            root = document.getElementById(root);
        };
    };
    if (!tagname) {
        tagname = "*";
    };
    if (depth) {
        var maxRecursion = depth;
        var all = (function getChildsElementsLevel(root, tagName, currentLevelNumber) {
            var result = [],
                currentLevelChilds = (function getLevelChilds(root, tagName) {
                    var result = [];
                    var children = root.firstChild;
                    do {
                        if (children.nodeName == tagName) {
                            result.push(children);
                        };
                    } while (children = children.nextSibling);
                    return result;
                })(root, tagName),
                currentLevelChildsLength = currentLevelChilds.length,
                nextLevelNumber = ++currentLevelNumber;

            for (var f = currentLevelChildsLength; f--;) {

                var currentEl = currentLevelChilds[f];
                result.push(currentEl);
                if (nextLevelNumber < maxRecursion) {
                    result.concat(getChildsElementsLevel(currentEl, tagName, nextLevelNumber));
                }
            }
            return result;
        })(root, tagname, 0);
    }
    else {
        var all = root.getElementsByTagName(tagname);
    }
    if (!classname) {
        return all;
    };
    var elements = [],
        allLength = all.length,
        isMyClass = isClassMember;
    if (firstFlag) {
        for (var i = 0; i < allLength; i++) {

            var element = all[i];
            if (isMyClass(element, classname)) {
                return element;
            };
        };
    }
    else {
        for (var i = allLength; i--;) {

            var element = all[i];
            if (isMyClass(element, classname)) {
                elements.push(element);
            };
        };
    }

    return elements;
};
function toArray(Lcollection) {
    for (var i = 0, a = [], len = Lcollection.length; i < len; i++) {
        a.push(Lcollection[i]);
    };
    return a;
};

(function () {
    function init() {
        var myDIV = getElements("checkbox-primary", "DIV", null, true);
        if (myDIV && myDIV.childNodes) {
            var myArray = toArray(myDIV.childNodes),
                myArrayLength = myArray.length,
                myCheckBox = null;

            for (var i = 0; i < myArrayLength; i++) {
                var tempNode = myArray[i];
                if (tempNode.nodeName.toUpperCase() === "INPUT" && tempNode.type.toUpperCase() === "CHECKBOX") {
                    myCheckBox = tempNode;
                    break;
                };
            };
            if (myCheckBox) {
                if (myCheckBox.checked) {
                    myCheckBox.disabled = false;
                }
                else {
                    myCheckBox.disabled = true;
                }
            };
        };
    };
    if (this.addEventListener) {
        this.addEventListener("load", init, false)
    }
    else {
        window.onload = init;
    }
}());

Answer 3

您可以通过一种非常简单的方式做到这一点。

为您的选择标签添加一个 ID

 <select name="fast" id="fast" class="selectpicker" disabled>

并使用此 javascript 检查点击事件并处理操作。

function selectElement(object) {
 if (object.checked == true) {
     document.getElementById("fast").disabled = false;
 } 
 else {
     document.getElementById("fast").disabled = true;
 }
}