Disable checkbox based on text value

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>

You can use `prop` method. `$("input.cmb").prop("disabled", true);` — Ram, Sep 05 '12 at 15:44
Seems to function fine here http://jsfiddle.net/j08691/EDa4r/ — j08691, Sep 05 '12 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, Sep 05 '12 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.http://jsfiddle.net/EDa4r/1/ — macericpet, Sep 05 '12 at 21:02

adeneo · Answer 1 · 2012-09-05T22:51:58.813

3

Remove the onclick handler and do :

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

FIDDLE

edited Sep 05 '12 at 22:51

answered Sep 05 '12 at 15:52

adeneo

312,895
29
395
388

This solution is the closest so far. It is just reversed. The checkbox needs to be active and only after they have typed in the text area does it disable. – macericpet Sep 05 '12 at 20:43
@macericpet - changed it, should be what you're after now! – adeneo Sep 05 '12 at 22:53

score 1 · Answer 2 · answered Sep 05 '12 at 15:43

1

This

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

should be this

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

answered Sep 05 '12 at 15:43

jackofallcode

174
5

1

Actually, it should be `$("input.cmb").prop("disabled", true);` – adeneo Sep 05 '12 at 15:44
Interesting. I've never see [this](http://stackoverflow.com/questions/5874652/prop-vs-attr) before. Thanks for the heads up. – jackofallcode Sep 05 '12 at 15:54
`disabled`, `checked`, etc are properties and not attributes, so prop would be the correct method. – adeneo Sep 05 '12 at 16:00

score 1 · Answer 3 · answered Sep 05 '12 at 15:54

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/

score 1 · Answer 4 · answered Sep 06 '12 at 03:48

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

score 0 · Answer 5 · answered Sep 05 '12 at 15:49

0

"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

answered Sep 05 '12 at 15:49

Alexander Wigmore

3,157
4
38
60

Disable checkbox based on text value

5 Answers5