how to verify if a checkbox is checked in jQuery before submission

Question

<select name="status" id='status'>
    <option value="Submitted">Submitted</option>
    <option value="Canceled">Canceled</option>

</select>
<input type="checkbox" id="app_box" name="application_complete" value="checked"> App Complete

<script type="text/javascript">
$(function() {

    $('form.editable').submit(function(){ 
        if ($('#status').val()=='Canceled') { 
            if (!confirm('This  information will be discarded! )) { 
                return false; 
            } 
        } 
    }); 

}); 
</script>

So, I have the above script which works fine. I have to add one more confirmation. When the agent clicks on the submit button , I want to check if the application check box is checked or not. If it is not checked then display another confirmation box saying, you have to check the box. How can this be done in jquery.

Answer 1

Like this:

if ($('#app_box').is(':checked')){...}

Or

if ($('#app_box')[0].checked){...}

So here is how your code should be:

$('form.editable').submit(function(){ 
    if (! $('#app_box')[0].checked){
       alert('Check App Complete first !');
       return false;
    }

    if ($('#status').val() == 'Canceled') { 
        if (!confirm('This  information will be discarded!' )) { 
            return false; 
        } 
    } 
}); 

---

Learn more:

• http://api.jquery.com/checked-selector/