Change button class when ALL fields are selected

Change button class when ALL fields are selected

I'm trying to execute a script where, when all select fields have been selected the submit button becomes active and the user can send.

Beforehand though, I want the button inactive (working) and a class adding called 'inactive'.

What I'm finding is, once one of the (four) selects has been selected the class gets removed and can't understand why as the button stays inactive until all four have been selected....

  1.  jQuery('.stage_two_btn').attr('disabled', true).addClass('inactive');
  2.     jQuery('.product_lead_class, .product_length_class, .product_width_class, .product_depth_class').on('change', function () {
  3.     
  4.     var product_lead_class = jQuery(".product_lead_class").val();
  5.     var product_length_class = jQuery(".product_length_class").val();
  6.     var product_width_class = jQuery(".product_width_class").val();
  7.     var product_depth_class = jQuery(".product_depth_class").val();        

  9.     if (product_lead_class != '' && product_length_class != '' && product_width_class != '' && product_depth_class != '') {
  10.         jQuery('.stage_two_btn').attr('disabled', false).addClass('inactive');
  11.     } else {
  12.         jQuery('.stage_two_btn').attr('disabled', true).removeClass('inactive');
  13.     }
  14. });