javascript - Enable checkbox if text field is not empty with inconsistent id

Question

Purpose is to have checkboxes disabled when the page loads, and remain greyed out until textbox is filled.

<input type="text" name="<%=commentID%>" />
<input type="checkbox" name="<%=SkipID%>" value="N" disabled/>

I tried to do something like

<input type="text" name="<%=commentID%>" onkeyup="userTyped('<%=SkipID%>') />

function userTyped(commen){
    if(this.value.length > 0){
        document.getElementById(commen).disabled=false;
    }else{
        document.getElementById(commen).disabled=true;
    }
 }

But it did not work. I am assuming because of the inconsistency of the name, but I have to have that.

Answer 1

You haven't given id to your html elements and is trying to use getElementById, which will return null. Javascript engine will not be able to set disabled attribute of null. Try setting id attribute, for elements as given below.

Also in your userTyped function you are referencing this. this here is the window object and not the input element. You need to pass the reference to input element to make this work, like this onkeyup="userTyped('<%=SkipID%>', this)"

Please find a possible correction below:

<input type="text" name="<%=commentID%>" id="<%=commentID%>" onkeyup="userTyped('<%=SkipID%>', this)" />
<input type="checkbox" name="<%=SkipID%>" id="<%=SkipID%>" value="N" disabled/>

/** commen is the id
  * e is the input element
  **/
function userTyped(commen, e){
    if(e.value.length > 0){
        document.getElementById(commen).disabled=false;
    }else{
        document.getElementById(commen).disabled=true;
    }
 }

jsFiddle here: http://jsfiddle.net/deepumohanp/dGS9H/