disable add to cart until all extra options have a value

1.md

Disable add to cart until all extra options have a value

JS

Everything is standard Skeletal except I gave the extra options table a unique class so I can directly target it .extra-options-table

2.js

// Check the functoin when the page reloads on variation change
$.product_variationInit({
				'loadtmplates': ['_buying_options', '_images','_header'],
				'fns' : {
					'onLoad' : function () {
						$('.addtocart').button("loading");
					},
					'onReady' : function () {
						$('.addtocart').button("reset");
						$('.zoom').zoom();

						if ($('.extra-options-table').length > 0){
							disable_buying_options();
						}
					},
				}
			});

// Main Logic
		if ($('.extra-options-table').length > 0){
			$(document).ready(function(){
				disable_buying_options();
			});
		}
		function disable_buying_options(){
			$('#_jstl__buying_options .addtocart').attr('disabled', true);
			$(".extra-options-alert").show();
		}
		function enable_buying_options(){
			$('#_jstl__buying_options .addtocart').attr('disabled', false);
			$(".extra-options-alert").hide();
		}		
		function check_extra_options(){
			var options = 0;
			$('.extra-options .extra-options-table')
			.find('input, textarea, select').each(function(){
				if($(this).val() == ''){
					options ++;
				}
			});
			if(options >= 1){
				return false;
			}else{
				return true;
			}
		}
		$('#_jstl__buying_options').on('change', '.extra-options .extra-options-table select', function(){
				console.log(check_extra_options());
				if(check_extra_options()){enable_buying_options();}else{disable_buying_options();}
			});
		$('#_jstl__buying_options').on('keyup', '.extra-options .extra-options-table input, .extra-options .extra-options-table textarea', function(){
				console.log(check_extra_options());
				if(check_extra_options()){enable_buying_options();}else{disable_buying_options();}
			});

3.html

<!-- Help the user understand why they can't buy the product yet -->
<!-- Place this directly under the add to cart button -->
<div class="extra-options-alert" style="display:none;">
    <div class="tooltip bottom" role="tooltip">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-inner">Please fill out all fields in the available options table above to proceed.</div>
    </div>
</div>

4.css

.extra-options-alert .tooltip {
    opacity: 1;
    filter: alpha(opacity=1);
}