javascript - 由于隐藏的选择元素，按钮被禁用

Question

我有一个包含三个选择选项的表单:

• 适合
• 颜色
• 尺寸

默认情况下，“适合”下拉菜单和“颜色”下拉菜单处于事件状态，并选择了默认值(例如，常规适合和蓝色)。

有三种不同的“尺寸”下拉菜单，但根据从“适合”下拉菜单中选择的内容，任何时候只能看到一个。

如果选项值为“none”，按钮将被禁用。

问题

只有当所有三个“尺码”下拉菜单都被更改时，按钮才会激活，以便它们的值不是“无”(这是通过为常规选择初始尺码，然后从“适合”下拉菜单中选择小号和长号来完成的).理想情况下，我只希望按钮考虑处于事件状态的“尺寸”下拉列表。

更新

下面@nagappan 提供的有效 jsFiddle 解决方案，非常感谢。

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 组合。因此，每当用户选择一个值时，我们都会与禁用组合进行交叉检查，如果匹配，我们就可以禁用该按钮。验证组合可以按如下方式完成。更新了 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;
});