I want to disable the next element of the parent of a tag:
HTML:

<span>     
    <input type="checkbox" onchange="disableInput(this)">     
</span>
<input type="text" />
<!-- When checkbox changed, disable inputfield -->

Javascript:

<script>
    function disableInput(element){
        element.parentNode.nextSibling.disabled = true;
    }
</script>

This didn't work. Can someone help me?

I want to disable the next element of the parent of a tag:
HTML:

<span>     
    <input type="checkbox" onchange="disableInput(this)">     
</span>
<input type="text" />
<!-- When checkbox changed, disable inputfield -->

Javascript:

<script>
    function disableInput(element){
        element.parentNode.nextSibling.disabled = true;
    }
</script>

This didn't work. Can someone help me?

• javascript
• html

• You'll find the nextSibling is a text node. Remove the white-space between </span> and <input.. and you'll see results. jsfiddle/LaTsd – George Commented Apr 28, 2014 at 19:00
• 1 Remove the white space between the closing span and input and it works. – j08691 Commented Apr 28, 2014 at 19:00
• There is no error, I didn't work – Thom Commented Apr 28, 2014 at 19:00
• @j08691 It Works! But how can I fix this, because in my code is it proper to indent and break lines – Thom Commented Apr 28, 2014 at 19:03

2 Answers 2

Try this. nextSibling includes text nodes (including empty space), but nextElementSibling doesn't.

function disableInput(element) {
  element.parentNode.nextElementSibling.disabled = true;
}

You can use nextElementSibling

  function disableInput(element){
        element.parentNode.nextElementSibling.disabled = true;
  }

It will select actual DOM element. The drawback - this may not be patible with older browsers like IE8.