CODEWITHSUNDEEP
javascriptjquery
macericpet
macericpet

Reputation: 63

Disable checkbox based on text value

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>

Upvotes: 3

Views: 1779

Answers (5)

macericpet
macericpet

Reputation: 63

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

Upvotes: 1

adeneo
adeneo

Reputation: 318202

Remove the onclick handler and do :

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

FIDDLE

Upvotes: 3

Sushanth --
Sushanth --

Reputation: 55750

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/

Upvotes: 1

Alexander Wigmore
Alexander Wigmore

Reputation: 3186

"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

Upvotes: 0

jackofallcode
jackofallcode

Reputation: 174

This

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

should be this

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

Upvotes: 1

Related Questions