check if all inputs are checked

I have 2 buttons and 2 inputs. The "buy"-button should only fire its default function when both inputs are checked. If not it should mark them with a red border. What am I doing wrong here?

jQuery(function($) {
        $('.checkedterms:checked').length == $('.abc').length
        $("#upsellyes").click(function(e) {
                $(".checkedterms").change(function(){
                        if ($('.checkedterms:checked').length == $('.checkedterms').length) {
                                e.preventDefault();
                                $("#terms-required").addClass('invalid');
                        } 
                        else {
                                $("#terms-required").removeClass('invalid');
                        }
                });
        });
});

.invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="invalid">
<input type="checkbox" class="checkedterms" name="terms" id="terms" style="position: absolute;"><label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">I have read <a href="#" >Allgemeinen Geschäftsbedingungen</a>.<span class="required">*</span></label><br />
<input type="checkbox" class="checkedterms" name="terms" id="terms" style="position: absolute;"><label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">I have read <a href="#" >Widerrufsbelehrung</a>.<span class="required">*</span></label><br />
</div><br>
<a href="#" id="upsellyes">buy</a><br><br>
<a href="#">no thanks</a>