Cannot read property '0' of undefined -- JavaScript

Question

My goal: Upon checking a checkbox, a pertinent element is enabled.

This is my JavaScript. As I understand it, this is the input. So calling parentNode on that is going up to the checkbox div. Then I set parent_1 which is the col-md-3 div. Then I set child to be the next sibling to parent_1, which is the next col-md-3 div. But I get the error

Uncaught TypeError: Cannot read property '0' of undefined 

The error location is the input.

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

This is my 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>

edit - Not at all sure why I wrote parent.children[0] instead of just object, clumsy of me

edit 2 - Changed title to be more accurate

Answer 1

You are almost there.

What you want is to get the next element, not necessarily the next DOM node (which is a text node).

Use this JS instead:

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

Here is a fiddle: 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

You can do it in a much simple way.

Add an ID to your select tag

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

And use this javascript to check for the click event and handle the actions.

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