Button disabled due to hidden selections

Question

I have a form with three choices:

• Fit
• Colour
• The size

By default, the "Fit" and "Color" drop-down menus are active with the default value selected (for example, "Normal Color" and "Blue Color").

There are three different “Size” drop-down lists, but only one of them is displayed at any time, depending on what is selected in the “Fit” drop-down menu.

The button is disabled if the parameter value = "no".

Problem

The button is activated only if all three drop-down lists of "Size" are changed, so their value is not equal to "none" (this is done by choosing the initial size for "Normal", and then selecting "Small and long" from the "Fit" drop-down list "). Ideally, I want the button to take into account the Size drop-down menu.

Update

The jsFiddle working solution provided by @nagappan below, thanks a lot.

https://jsfiddle.net/dodgers76/c0dvdwbz/

var currentSelectedVals = {'selector-fit':'','selector-color':'','selector-sizes':''};
var disableComboVals = [
{'selector-fit':'','selector-color':'','selector-sizes':'none'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'10'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'20'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'22'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'24'},
{'selector-fit':'long','selector-color':'','selector-sizes':'22'},
{'selector-fit':'long','selector-color':'','selector-sizes':'24'}
];
function checkDisableCombo() {
return $.grep(disableComboVals, function(vals){
  cnt = 0;
  $.each(vals, function(key,val) {
     console.log('comparing key val '+key+val);
     if (val === '' || val === currentSelectedVals[key]) {
         console.log('>>matched values');
         cnt = cnt + 1;
     }
  });
  if (cnt===3) {
     return true;
  }
  return false;
});
};
$(function(){
var sizeVal = 'none';


  $("select.selector-fit").on("change", function(){
    //remove active
    $("select.selector-sizes.active").removeClass("active");
    //check if select class exists. If it does then show it
    var subList = $("select.selector-sizes."+$(this).val());
    if (subList.length){
      //class exists. Show it by adding active class to it
      subList.addClass("active");
      subList.val(sizeVal);
    }
  });

  $('.selector-sizes').on('change', function() {
    sizeVal = $(this).val();
  });
});

$(function() {
  $('.selector').on('change', function() {
    var $sels = $('option.selector-sizes:selected[value="none"]');
    var isSizeSelector = jQuery.inArray( "selector-sizes",this.classList);
    currentSelectedVals[this.classList[1]] = this.value;
    console.log(currentSelectedVals);
    var result = checkDisableCombo();
    console.log(result);
    if ( result.length > 0) {
        console.log('disabled false');
        $("#Testing").attr("disabled", true);
    } else {
        $("#Testing").attr("disabled", false);
    }
  }).change();
});

Answer 1

. . disbale combos. , , , , . , . ​​ jsfiddle. JS FIDDLE UPDATED

function checkDisableCombo() {
return $.grep(disableComboVals, function(vals){
  cnt = 0;
  $.each(vals, function(key,val) {
     console.log('comparing key val '+key+val);
     if (val === '' || val === currentSelectedVals[key]) {
         console.log('>>matched values');
         cnt = cnt + 1;
     }
  });
  if (cnt===3) {
     return true;
  }
  return false;
});