jQuery wordpress TypeError: $ is not a function $ is not defined

Question

I'm trying to use jquery to disable checkboxes after two options are selected on a restaurant menu. The options display in a modal. I've tried most if not all recommendations to resolve with no luck.

URL: https://206culinaryservices.com/place-an-order/

base jQuery code:

$(":checkbox[name='rms_mod_666[]']").change(function() {
  if ($(":checkbox[name='rms_mod_666[]']:checked").length == 2)
    $(":checkbox:not(:checked)").prop('disabled', true);
  else
    $(":checkbox:not(:checked)").prop('disabled', false);
});

seems to work fine in this jsfiddle: https://jsfiddle.net/R7Cwg/1/
but not in my use case.

I've tried wrapping in:

(function( $ ) {
  $(function() {
// insert above jquery code here
});
});

this resolves the error but the code still doesn't work as desired.

...

Another unsuccessful attempt:

(function($) { $(function(){
var maxCheckboxes = 2;

 $('input[name="rms_mod_666[]"]').change(function () {
     var checkedNum = $('input[name="rms_mod_666[]"]:checked').length;
     var allCheckoxesChecked = $('input[name="rms_mod_666[]"]:checked');
     var allCheckboxes = $("input[name='rms_mod_666[]']");

     //alert(checkedNum + " - " + maxCheckboxes);

     if (checkedNum == maxCheckboxes) {
         $(allCheckboxes).attr('disabled', 'disabled');
         $(allCheckoxesChecked).removeAttr('disabled');
//         alert("ooou equals and disable!");
     } else {
         $(allCheckboxes).removeAttr('disabled');
     }

 });
 });
 })(jQuery);

Any help is much appreciated.

Answer 1

Did you wrap like this ?

(function($){
    $(":checkbox[name='rms_mod_666[]']").change(function() {
        if ($(":checkbox[name='rms_mod_666[]']:checked").length == 2) {
        $(":checkbox:not(:checked)").prop('disabled', true);
        } else {
        $(":checkbox:not(:checked)").prop('disabled', false);
        }
    });
})(jQuery);