如何比较阵列的按钮选项，然后使用jquery禁用它

Question

我想禁用按钮或更改其类，如果它不是一个有效的选项。

我正在将此用于电子商务网站上的产品选项。我有3个数组。前两个我用来创建按钮组合。我想我可以使用最后一个数组进行比较，并决定该选项是否有效。 如果无效，我希望该按钮被禁用。

（即：如果选择中型或大型选项，然后绿色被禁用或灰色的，因为它不是一个有效的选项组合）

Sample Image of buttons

myArraySize = ['small', 'medium', 'large']; 
myArrayColor = ["blue", "red", "green"]; 
myArrayValidOptions = ["small-blue", "medium-blue", "large-blue", "small-red", "medium-red", "large-red", "small-green"]; 

这里是关于codepen一个例子。请有人发挥他们的魔力。对此，我真的非常感激。我真的很新的jQuery/JavaScript，并希望得到这个工作。

https://codepen.io/cliebich/pen/gRdKOq

Answer 1

这是否你想要做什么？

myArraySize = ['small', 'medium', 'large']; 
 
myArrayColor = ["blue", "red", "green"]; 
 
myArrayValidOptions = [ 
 
    "small-blue", 
 
    "medium-blue", 
 
    "large-blue", 
 
    "small-red", 
 
    "medium-red", 
 
    "large-red", 
 
    "small-green" 
 
]; 
 

 
var result = $(".specOptions"); 
 
result.html(""); 
 

 
var result2 = $(".specOptions2"); 
 
result2.html(""); 
 

 
for (var i = 0; i < myArraySize.length; i++) { 
 
    result.append(
 
     '<a class="btn btn-default btn-variant" name="myArraySize" data-value="' + 
 
     myArraySize[i] + 
 
     '" > ' + 
 
     myArraySize[i] + 
 
     "</a>" 
 
    ); 
 
} 
 
for (var i = 0; i < myArrayColor.length; i++) { 
 
    result2.append(
 
     '<a class="btn btn-default btn-variant" name="myArrayColor" data-value="' + 
 
     myArrayColor[i] + 
 
     '" > ' + 
 
     myArrayColor[i] + 
 
     "</a>" 
 
    ); 
 
} 
 
$(document).ready(function() { 
 
    $(".specOptions a, .specOptions2 a").click(function() { 
 
     if ($(this).hasClass("disabled")) 
 
      return; 
 

 
     var theSelector = $(this).parent().attr("class"); 
 

 
     var value = $(this).data("value"); // value of checkbox 
 
     $("." + theSelector + " a").removeClass("btn-primary"); // clear checkboxes in same group (mimic radio behavior) 
 
     $("." + theSelector + ' a[data-value="' + value + '"]').addClass("btn-primary"); // check all checkboxes with same value 
 

 
     if (this.name === "myArraySize") { 
 
      $("a[name='myArrayColor']").each(function() { 
 
       var color = $(this).data("value"); 
 
       if (myArrayValidOptions.indexOf(value + "-" + color) < 0) 
 
        $(this).addClass("disabled").removeClass("btn-primary"); 
 
       else 
 
        $(this).removeClass("disabled"); 
 
      }); 
 
     } 
 
    }); 
 
});

.btn{margin:3px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"></div> 
 
    <div class="col-sm-6"></div> 
 
    <div class="col-sm-6"> 
 
    <div class="prodOptions"> 
 
    <div class="specOptions"> 
 
    </div> 
 
    <div class="specOptions2"></div> 
 
     </div> 
 
    </div> 
 
</div>