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
– Ram, Commented Sep 5, 2012 at 15:44
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
– 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.net/EDa4r/1 — macericpet
– macericpet, Commented Sep 5, 2012 at 21:02

adeneo · Accepted Answer · 2012-09-05 22:51:58Z

3

Remove the onclick handler and do :

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

FIDDLE

edited Sep 5, 2012 at 22:51

answered Sep 5, 2012 at 15:52

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

macericpet Over a year ago

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.

adeneo Over a year ago

@macericpet - changed it, should be what you're after now!

jackofallcode · Accepted Answer · 2012-09-05 15:43:13Z

1

This

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

should be this

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

answered Sep 5, 2012 at 15:43

jackofallcode

1745 bronze badges

3 Comments

adeneo Over a year ago

Actually, it should be $("input.cmb").prop("disabled", true);

jackofallcode Over a year ago

Interesting. I've never see this before. Thanks for the heads up.

adeneo Over a year ago

disabled, checked, etc are properties and not attributes, so prop would be the correct method.

Sushanth -- · Accepted Answer · 2012-09-05 15:54:57Z

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/

macericpet · Accepted Answer · 2012-09-06 03:48:10Z

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

Alexander Wigmore · Accepted Answer · 2012-09-05 15:49:21Z

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 5, 2012 at 15:49

Alexander Wigmore

3,1864 gold badges41 silver badges60 bronze badges

Collectives™ on Stack Overflow

Disable checkbox based on text value

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related