Question

I have 3 checkboxes with the following jQuery and it works great.

$(document).ready(function() {
    var $finishBoxes = $('#co1,#co2,#co3');
    $finishBoxes.change(function(){
        // check if all are checked based on if the number of checkboxes total
        // is equal to the number of checkboxes checked
        if ($finishBoxes.length == $finishBoxes.filter(':checked').length) {
            $('#submit2pd').attr("disabled", false);
        }
        else{
            $('#submit2pd').attr("disabled", true);
        }
    });

    $finishBoxes.ready(function(){
        // check if all are checked based on if the number of checkboxes total
        // is equal to the number of checkboxes checked
        if ($finishBoxes.length == $finishBoxes.filter(':checked').length) {
            $('#submit2pd').attr("disabled", false);
        } 
        else{
            $('#submit2pd').attr("disabled", true);
        }
    });
});

I want to add the following select option to the if statement so if all 3 are checked and the checkbox value=1 (yes) then the $(‘#submit2pd’).attr(“disabled”, true);

<select name="tcaccept" id="tcaccept"> 
    <option value="0"<?php if($mychecklist->tcaccept==0) echo 'selected' ?>>No</option>
    <option value="1"<?php if($mychecklist->tcaccept==1) echo 'selected' ?>>Yes</option>
</select>

Any help would be greatly appreciated.

Answer 1

Here some proper code:

if ( ( $finishBoxes.length == $finishBoxes.filter(':checked').length ) && ( $('#tcaccept').val() == '1' )) {

    $('#submit2pd').prop("disabled", false);
    // $('#submit2pd').attr("disabled", "");


}else{

    $('#submit2pd').prop("disabled", true);
    //$('#submit2pd').attr("disabled", "disabled");
}

If you are using jquery 1.6+, it’s better to use .prop() for special attributes like disabled (or checked …).

---

Edit according to the comments:

<form>
    <input type="checkbox" id="col1" /><label for="col1">Checkbox 1</label>
    <input type="checkbox" id="col2" /><label for="col2">Checkbox 2</label>
    <input type="checkbox" id="col3" /><label for="col3">Checkbox 3</label>
    <select id="tcaccept">
        <option value="0">No</option>
        <option value="1">Yes</option>
    </select>
    <input type="submit" text="Submit" id="SubmitButton" />
</form>

To cancel the form submition, simply return false;:

$('#SubmitButton').click(function(event) {
    var $finishBoxes = $('#co1,#co2,#co3');

    if (!($finishBoxes.length == $finishBoxes.filter(':checked').length && $('#tcaccept').val() == '1' )) {
        alert('Check all the boxes and select "Yes"');
        return false;
    }

    // otherwise the form is submitted
    alert('Form will be submitted');

});

I’ve created a jsfiddle for you to play with.