I need to disable a checkbox when a user enters text into a text area, otherwise it would be active. I have tried most relevant events but I can't get it to work. onkeydown disables for the first press and onchange will work if the user enters something then deletes it. Nothing seems to disable it after they leave the text area.

<script type="text/javascript">

    function enable_cb(textarea) { 
       if ($(textarea).val() != "" ) { 
        $("input.cmb").removeAttr("disabled"); 
    } 
    else { 
        $("input.cmb").attr("disabled", true); 
    } 
} 

</script>
Comments:<br />
<p><textarea name="issue" id="issue_ta" cols="50" rows="10" class="help" tabindex="2" title="Enter Detailed Description" onchange="enable_cb(this);"></textarea></p>
<p><input name="no_issue" type="checkbox" id="no_issue" class="cmb" />No Issues to Report</p>
<p class="label">Enter Current Vehicle Mileage:</p>
<p><input type="tel" name="record_mileage" class="required" tabindex="3" title="&nbsp;Enter Current Mileage&nbsp;" size="25"/></p>
<p><input type="submit" name="Submit" value="Send"/></p>
</form>

I need to disable a checkbox when a user enters text into a text area, otherwise it would be active. I have tried most relevant events but I can't get it to work. onkeydown disables for the first press and onchange will work if the user enters something then deletes it. Nothing seems to disable it after they leave the text area.

<script type="text/javascript">

    function enable_cb(textarea) { 
       if ($(textarea).val() != "" ) { 
        $("input.cmb").removeAttr("disabled"); 
    } 
    else { 
        $("input.cmb").attr("disabled", true); 
    } 
} 

</script>
Comments:<br />
<p><textarea name="issue" id="issue_ta" cols="50" rows="10" class="help" tabindex="2" title="Enter Detailed Description" onchange="enable_cb(this);"></textarea></p>
<p><input name="no_issue" type="checkbox" id="no_issue" class="cmb" />No Issues to Report</p>
<p class="label">Enter Current Vehicle Mileage:</p>
<p><input type="tel" name="record_mileage" class="required" tabindex="3" title="&nbsp;Enter Current Mileage&nbsp;" size="25"/></p>
<p><input type="submit" name="Submit" value="Send"/></p>
</form>

• javascript
• jquery

• You can use prop method. $("input.cmb").prop("disabled", true); – Ram Commented Sep 5, 2012 at 15:44
• Seems to function fine here jsfiddle/j08691/EDa4r – j08691 Commented Sep 5, 2012 at 15:47
• I'm not seeing it function right, even in the fiddle. This method seems to follow what I have. It works only after you have entered the text once, then delete. Odd. – macericpet Commented Sep 5, 2012 at 20:41
• I got this to work in a fiddle, but not production. It must be conflicting with the form tips I have on that element.jsfiddle/EDa4r/1 – macericpet Commented Sep 5, 2012 at 21:02

5 Answers 5

Remove the onclick handler and do :

$(function() {
    $("#issue_ta").on('change keyup', function() {
        $("input.cmb").prop("disabled", this.value.length); 
    });
});

FIDDLE

This

 $("input.cmb").attr("disabled", true);

should be this

 $("input.cmb").attr("disabled", "disabled");

Why don't you use the blur event for the textArea.. This will make sure the code gets executed once the textarea loses focus..

Try this code..

// Your Markup..
Comments:<br />
<p><textarea name="issue" id="issue_ta" cols="50" rows="10" class="help" tabindex="2" title="Enter Detailed Description" ></textarea></p>
<p><input name="no_issue" type="checkbox" id="no_issue" class="cmb" />No Issues to Report</p>
<p class="label">Enter Current Vehicle Mileage:</p>
<p><input type="tel" name="record_mileage" class="required" tabindex="3" title="&nbsp;Enter Current Mileage&nbsp;" size="25"/></p>
<p><input type="submit" name="Submit" value="Send"/></p>​

// Your jQuery code..
​$(function() {
    $('#issue_ta').on('blur' , function(){
       var val =  $('#issue_ta').val();
        if(val == ''){
           $('#no_issue').attr('disabled', true);                 
        }
        else{
             $('#no_issue').attr('disabled', false);    
        }
    });
});​

You can check this fiddle for a working example http://jsfiddle/sushanth009/A46py/

Thanks to all. Each response got me in the right direction.

    <script type="text/javascript">
 function enable_cb(textarea) {
    if ($(textarea).val() !== "") {
        $("input.cmb").prop("disabled", true);
    }
    else {
        $("input.cmb").prop("disabled", false);
    }
}
</script>

     Comments:<br />
<p><textarea name="issue" id="issue_ta" cols="50" rows="10" class="help" tabindex="2" title="Enter Detailed Description" onblur="enable_cb(this);"></textarea></p>
<p><input name="no_issue" type="checkbox" id="no_issue" class="cmb" />No Issues to Report</p>
<p class="label">Enter Current Vehicle Mileage:</p>
<p><input type="tel" name="record_mileage" class="required" tabindex="3" title="&nbsp;Enter Current Mileage&nbsp;" size="25"/></p>
<p><input type="submit" name="Submit" value="Send"/></p>
</form>​

Fiddle link

"Nothing seems to disable it after they leave the text area."

.blur will be helpful in this situation - it will detect when the user leaves the element, and you can then apply your desired effect. .blur documentation