Multi checkbox requirement enable disable dropdown box using jquery

Question

So first off I did search and I found this Enable/Disable a dropdownbox in jquery which got me on the right track. I'm new to jquery so when seeing other code I can adapt it to fit and work for me.

So what i'm asking is how do you make it check to see if two check boxes condition are true?

<script>
    $(document).ready(function() {
         $("#box1").click(function() {
           if ($(this).is(":checked")) {
              $("#tech1").prop("disabled", false);
           } else {
              $("#tech1").prop("disabled", true);  
           }
         });
        });
</script>

I want it to be if box1 and box2 are checked enable this box? I understand you can do it with an if statement, but I'm not sure where exactly it goes. Thanks in advance.

Would this work:

$("#box1").click(function() {
    if ($(this).is(":checked")) &&
$("#box2").click(function() {
    if ($(this).is(":checked"))

I doesn't work and I assume thats because that above creates two functions and not the if statement that I need.

Answer 1

Include both in the event handler, and check if both are checked

$(document).ready(function() {
    var boxes = $("#box1, #box2");

    boxes.on('change',  function() {

       var disabled = boxes.filter(':checked').length === boxes.length;

       $("#tech1").prop("disabled", disabled);

    });
});

FIDDLE

Answer 2

Consider box1 & box2 checkboxes defined with a css class boxes as below:

<input type="checkbox" id="box1" class="boxes" />
<input type="checkbox" id="box2" class="boxes" />

Now you can use box class as jquery selector to do your task

<script>
$(document).ready(function() {
    $(".boxes").click(function(){
         if($(".boxes:checked").size() == $(".boxes").size()){
            $("#tech1").prop("disabled", false);
         }else{
            $("#tech1").prop("disabled", true);  
         }
     );
});