禁用基于文本值的复选框

Question

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>

Answer 1

Remove the onclick handler and do :

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

FIDDLE

Answer 2

This

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

should be this

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

Answer 3

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.net/sushanth009/A46py/

Answer 4

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

Answer 5

"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