如何比較陣列的按鈕選項，然後使用jquery禁用它

我想禁用按鈕或更改其類，如果它不是一個有效的選項。如何比較陣列的按鈕選項，然後使用jquery禁用它

我正在將此用於電子商務網站上的產品選項。我有3個數組。前兩個我用來創建按鈕組合。我想我可以使用最後一個數組進行比較，並決定該選項是否有效。如果無效，我希望該按鈕被禁用。

（即：如果選擇中型或大型選項，然後綠色被禁用或灰色的，因爲它不是一個有效的選項組合）

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

來源

2017-07-07 Chris Thomas

什麼是你的具體問題或問題？請花一些時間閱讀[問] – charlietfl

1）您的codepen已損壞。 2）SO不是代碼寫入服務。預計您會嘗試編寫一些代碼來實現您的目標。然後在這裏問一個問題，你在做什麼問題。「你是否想要編碼？」對這個網站不是一個有效的問題。 – gforce301

我當時在連接的codepen上玩耍（抓住我之間的變化和代碼被打破）。在我陷入困境的狀態下，我恢復了原來的工作代碼。如果你現在可以採取措施，那會很好。到目前爲止，我已經能夠谷歌這種事情。這一個讓我難住。 –

這是否你想要做什麼？

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>

來源

2017-07-07 16:11:07 H77

謝謝h77，我很感激你花時間在此。你的例子並沒有做我所需要的事情（可能是我解釋我需要的可怕工作）。儘管不是非常優雅，我最終找出了它。這是codepen：https://codepen.io/cliebich/pen/rwZKbd –

好的。我認爲這是兩種方式。我猜想如果你想要的是第二部分的話。 – H77

如何比較陣列的按鈕選項，然後使用jquery禁用它

回答

相關問題