jQuery 选项只启用一些选项

在选择其他选择器中的一个选项时，如何选择要禁用/启用哪个选择器/选项

例如：

我希望将它们全部禁用，除了“unit_block”，在我选择其中一个选项（A或B）后，“unit_row_big”将允许我选择任何选项，但“unit_row”将仅启用一些选项选项。

基本上这里是电子表格我想如何创建它。

我基本上都在工作，但它不是防弹的。

如何在块A（上面一个）中看到有4个更大的单元格（unit_row_big），块块B有3个。 然后，块B中的一些较大的单元具有12个较小的单元（unit_row），但它们都具有5个较小的单元宽度（unit_column）。 例如，如果我想在第2-5位置创建Large（unit_size）单元格，它将与下一个大单元格冲突，所以我想要有exception，只有当unit_column为1时，如果unit_column为1或5，则只能使用Large每次都很小。

我在选择器中找到了几个禁用/启用选项的例子，但没有这个特别的。 因为我对javascripts非常糟糕，所以我不知道如何创建一个，如果我至少可以编辑一个，我感觉很好。

电子表格

JSFiddle演示

  A B  
 
  1 2 3 4  
 
  1 2 3 4 5 6 7 8 9 10 11 12  
 
  1 2 3 4 5  
 
  Small Medium Large   

Answer 1

您可以使用jQuery，但在纯JavaScript中这很容易。

您只需要监视所需的任何选择器，然后根据这些选择使disabled属性为true 。 我做了一个小小提琴，如果在第一个下拉列表中选择了B ，则在第二个下拉列表中禁用2。 您应该能够轻松扩展它。

https://jsfiddle.net/ryanpcmcquen/6no3jyzb/

 document.addEventListener('DOMContentLoaded', function () { 'use strict'; var unitBlock = document.querySelector('select#unit_block'); var unitRowBig = document.querySelector('select#unit_row_big'); unitBlock.addEventListener('change', function () { if (unitBlock.value === 'B') { // [1] is equal to option '2' unitRowBig[1].disabled = true; } else { unitRowBig[1].disabled = false; } }); }); 

 
 
Unit specification
 
 
  
 
  
 
  
 
  A B  
 
  1 2 3  
 
  1 2 3 4 5 6 7 8 9 10 11 12  
 
  1 2 3 4 5  
 
  Small Medium Large  
 
 
 Insert