复选框选择似乎彼此不一致

好的，我得到了一个使用JavaScript的项目（仍在学习）。基本上，我需要有一个用户可以选择的复选框列表（即属性），当他们选择这些不同的属性时，我需要有一个不同的divs显示，其中包含与所选属性对应的信息。例如，如果他们选中"经济"复选框，则仅显示与该复选框关联的div。我已经能够开始工作了。

现在我需要让不在一起的属性变灰并在选中的属性上被禁用。 例如，"经济舱"复选框与"高级"复选框不符。因此，如果用户选中"经济"复选框，则应禁用"高级"复选框并灰显。在某种程度上，我已经做到了。

但是，某些属性由不同的div 共享。这就是我遇到麻烦的地方。这是我的 HTML：我在"头"中确实有一个指向我的 js 文件的链接。这只是页面的一部分：

    <div id="column2" style="width:250px; padding:5px 10px 5px 10px; float:left">
    <form name="checkForm2" id="checkForm2">
        <input type="checkbox" id="att_9" name="att_9" onChange="showBERNINI();"><span id="grey_att9">Economy</span><br />
        <input type="checkbox" id="att_10" name="att_10" onChange="showPICASSO();"><span id="grey_att10">Visible Banner: 33.5" x 78.7"</span><br />
        <input type="checkbox" id="att_11" name="att_11" onChange="showMATISSE();"><span id="grey_att11">Tension Knob System</span><br />
        <input type="checkbox" id="att_12" name="att_12" onChange="showBERNPIC();"><span id="grey_att12">Tape-in Bottom Rail</span><br />
        <input type="checkbox" id="att_13" name="att_13" onChange="showPICASSO();"><span id="grey_att13">3 piece bungee pole</span><br />
        <input type="checkbox" id="att_14" name="att_14" onChange="showMATISSE();"><span id="grey_att14">Great for interchangeable graphics</span><br />
        <input type="checkbox" id="att_15" name="att_15" onChange="showBERNINI();"><span id="grey_att15">90 day warranty</span><br />
        <input type="checkbox" id="att_16" name="att_16" onChange="showMATISSE();"><span id="grey_att16">Chrome end caps</span><br />
    </form>
</div>

---

JS文件：

function showBERNINI() {
if (document.checkForm1.att_2.checked || document.checkForm1.att_5.checked || document.checkForm1.att_6.checked || document.checkForm2.att_9.checked || document.checkForm2.att_15.checked || document.checkForm3.att_23.checked)
{
    document.getElementById("Picasso").style.display="none";
    document.getElementById("Matisse").style.display="none";
    document.getElementById("att_3").disabled=true;
    document.getElementById("att_10").disabled=true;
    document.getElementById("att_11").disabled=true;
    document.getElementById("att_13").disabled=true;
    document.getElementById("att_14").disabled=true;
    document.getElementById("att_16").disabled=true;
    document.getElementById("att_17").disabled=true;
    document.getElementById("att_18").disabled=true;
    document.getElementById("att_19").disabled=true;
    document.getElementById("att_20").disabled=true;
    document.getElementById("att_21").disabled=true;
    document.getElementById("att_22").disabled=true;
    document.getElementById("att_24").disabled=true;
    document.getElementById("grey_att3").style.color="#d1d1d1";
    document.getElementById("grey_att10").style.color="#d1d1d1";
    document.getElementById("grey_att11").style.color="#d1d1d1";
    document.getElementById("grey_att13").style.color="#d1d1d1";
    document.getElementById("grey_att14").style.color="#d1d1d1";
    document.getElementById("grey_att16").style.color="#d1d1d1";
    document.getElementById("grey_att17").style.color="#d1d1d1";
    document.getElementById("grey_att18").style.color="#d1d1d1";
    document.getElementById("grey_att19").style.color="#d1d1d1";
    document.getElementById("grey_att20").style.color="#d1d1d1";
    document.getElementById("grey_att21").style.color="#d1d1d1";
    document.getElementById("grey_att22").style.color="#d1d1d1";
    document.getElementById("grey_att24").style.color="#d1d1d1";
}
else
{
    document.getElementById("Picasso").style.display="";
    document.getElementById("Matisse").style.display="";
    document.getElementById("att_3").disabled=false;
    document.getElementById("att_10").disabled=false;
    document.getElementById("att_11").disabled=false;
    document.getElementById("att_13").disabled=false;
    document.getElementById("att_14").disabled=false;
    document.getElementById("att_16").disabled=false;
    document.getElementById("att_17").disabled=false;
    document.getElementById("att_18").disabled=false;
    document.getElementById("att_19").disabled=false;
    document.getElementById("att_20").disabled=false;
    document.getElementById("att_21").disabled=false;
    document.getElementById("att_22").disabled=false;
    document.getElementById("att_24").disabled=false;
    document.getElementById("grey_att3").style.color="";
    document.getElementById("grey_att10").style.color="";
    document.getElementById("grey_att11").style.color="";
    document.getElementById("grey_att13").style.color="";
    document.getElementById("grey_att14").style.color="";
    document.getElementById("grey_att16").style.color="";
    document.getElementById("grey_att17").style.color="";
    document.getElementById("grey_att18").style.color="";
    document.getElementById("grey_att19").style.color="";
    document.getElementById("grey_att20").style.color="";
    document.getElementById("grey_att21").style.color="";
    document.getElementById("grey_att22").style.color="";
    document.getElementById("grey_att24").style.color="";
}
if (document.checkForm2.att_12.checked)
{
    document.getElementById("Matisse").style.display="none";
}}
function showPICASSO() {
if (document.checkForm1.att_3.checked || document.checkForm2.att_10.checked || document.checkForm2.att_13.checked)
{
    document.getElementById("Bernini").style.display="none";
    document.getElementById("Matisse").style.display="none";
    document.getElementById("att_2").disabled=true;
    document.getElementById("att_5").disabled=true;
    document.getElementById("att_6").disabled=true;
    document.getElementById("att_9").disabled=true;
    document.getElementById("att_11").disabled=true;
    document.getElementById("att_14").disabled=true;
    document.getElementById("att_15").disabled=true;
    document.getElementById("att_16").disabled=true;
    document.getElementById("att_17").disabled=true;
    document.getElementById("att_18").disabled=true;
    document.getElementById("att_19").disabled=true;
    document.getElementById("att_20").disabled=true;
    document.getElementById("att_21").disabled=true;
    document.getElementById("att_23").disabled=true;
    document.getElementById("grey_att2").style.color="#d1d1d1";
    document.getElementById("grey_att5").style.color="#d1d1d1";
    document.getElementById("grey_att6").style.color="#d1d1d1";
    document.getElementById("grey_att9").style.color="#d1d1d1";
    document.getElementById("grey_att11").style.color="#d1d1d1";
    document.getElementById("grey_att14").style.color="#d1d1d1";
    document.getElementById("grey_att15").style.color="#d1d1d1";
    document.getElementById("grey_att16").style.color="#d1d1d1";
    document.getElementById("grey_att17").style.color="#d1d1d1";
    document.getElementById("grey_att18").style.color="#d1d1d1";
    document.getElementById("grey_att19").style.color="#d1d1d1";
    document.getElementById("grey_att20").style.color="#d1d1d1";
    document.getElementById("grey_att21").style.color="#d1d1d1";
    document.getElementById("grey_att23").style.color="#d1d1d1";
}
else
{
    document.getElementById("Bernini").style.display="";
    document.getElementById("Matisse").style.display="";
    document.getElementById("att_2").disabled=false;
    document.getElementById("att_5").disabled=false;
    document.getElementById("att_6").disabled=false;
    document.getElementById("att_9").disabled=false;
    document.getElementById("att_11").disabled=false;
    document.getElementById("att_14").disabled=false;
    document.getElementById("att_15").disabled=false;
    document.getElementById("att_16").disabled=false;
    document.getElementById("att_17").disabled=false;
    document.getElementById("att_18").disabled=false;
    document.getElementById("att_19").disabled=false;
    document.getElementById("att_20").disabled=false;
    document.getElementById("att_21").disabled=false;
    document.getElementById("att_23").disabled=false;
    document.getElementById("grey_att2").style.color="";
    document.getElementById("grey_att5").style.color="";
    document.getElementById("grey_att6").style.color="";
    document.getElementById("grey_att9").style.color="";
    document.getElementById("grey_att11").style.color="";
    document.getElementById("grey_att14").style.color="";
    document.getElementById("grey_att15").style.color="";
    document.getElementById("grey_att16").style.color="";
    document.getElementById("grey_att17").style.color="";
    document.getElementById("grey_att18").style.color="";
    document.getElementById("grey_att19").style.color="";
    document.getElementById("grey_att20").style.color="";
    document.getElementById("grey_att21").style.color="";
    document.getElementById("grey_att23").style.color="";
}
if (document.checkForm2.att_12.checked)
{
    document.getElementById("Matisse").style.display="none";
    document.getElementById("att_11").disabled=true;
    document.getElementById("att_14").disabled=true;
    document.getElementById("att_16").disabled=true;
    document.getElementById("att_17").disabled=true;
    document.getElementById("att_18").disabled=true;
    document.getElementById("att_19").disabled=true;
    document.getElementById("att_20").disabled=true;
    document.getElementById("att_21").disabled=true;
    document.getElementById("grey_att11").style.color="#d1d1d1";
    document.getElementById("grey_att14").style.color="#d1d1d1";
    document.getElementById("grey_att16").style.color="#d1d1d1";
    document.getElementById("grey_att17").style.color="#d1d1d1";
    document.getElementById("grey_att18").style.color="#d1d1d1";
    document.getElementById("grey_att19").style.color="#d1d1d1";
    document.getElementById("grey_att20").style.color="#d1d1d1";
    document.getElementById("grey_att21").style.color="#d1d1d1";
}
if (document.checkForm3.att_22.checked || document.checkForm3.att_24.checked)
{
    document.getElementById("Bernini").style.display="none";
}}
function showBERNPIC() {
if (document.checkForm2.att_12.checked)
{
    document.getElementById("Matisse").style.display="none";
    document.getElementById("att_11").disabled=true;
    document.getElementById("att_14").disabled=true;
    document.getElementById("att_16").disabled=true;
    document.getElementById("att_17").disabled=true;
    document.getElementById("att_18").disabled=true;
    document.getElementById("att_19").disabled=true;
    document.getElementById("att_20").disabled=true;
    document.getElementById("att_21").disabled=true;
    document.getElementById("grey_att11").style.color="#d1d1d1";
    document.getElementById("grey_att14").style.color="#d1d1d1";
    document.getElementById("grey_att16").style.color="#d1d1d1";
    document.getElementById("grey_att17").style.color="#d1d1d1";
    document.getElementById("grey_att18").style.color="#d1d1d1";
    document.getElementById("grey_att19").style.color="#d1d1d1";
    document.getElementById("grey_att20").style.color="#d1d1d1";
    document.getElementById("grey_att21").style.color="#d1d1d1";
}
else
{
    document.getElementById("Matisse").style.display="";
    document.getElementById("att_11").disabled=false;
    document.getElementById("att_14").disabled=false;
    document.getElementById("att_16").disabled=false;
    document.getElementById("att_17").disabled=false;
    document.getElementById("att_18").disabled=false;
    document.getElementById("att_19").disabled=false;
    document.getElementById("att_20").disabled=false;
    document.getElementById("att_21").disabled=false;
    document.getElementById("grey_att11").style.color="";
    document.getElementById("grey_att14").style.color="";
    document.getElementById("grey_att16").style.color="";
    document.getElementById("grey_att17").style.color="";
    document.getElementById("grey_att18").style.color="";
    document.getElementById("grey_att19").style.color="";
    document.getElementById("grey_att20").style.color="";
    document.getElementById("grey_att21").style.color="";
}
if (document.checkForm1.att_2.checked || document.checkForm1.att_5.checked || document.checkForm1.att_6.checked || document.checkForm2.att_9.checked || document.checkForm2.att_15.checked || document.checkForm3.att_23.checked)
{
    document.getElementById("Picasso").style.display="none";
    document.getElementById("Matisse").style.display="none";
}
if (document.checkForm1.att_3.checked || document.checkForm2.att_10.checked || document.checkForm2.att_13.checked)
{
    document.getElementById("Bernini").style.display="none";
    document.getElementById("Matisse").style.display="none";
}}

我遇到的问题的最好例子是当我选择"经济"复选框，然后选择"胶带底轨"复选框

时，然后如果我碰巧取消选择"胶带底轨"复选框太多复选框再次可用，我无法让它只显示仅选中"经济"复选框的情况下应该显示的内容。就像有些被启用，不应该。

我希望我没有在这里添加太多，但由于这是我的第一个 JavaScript 项目，我想我应该发布更多而不是更少。我也知道必须有一种更巩固的方式来做我正在尝试的事情，但我并不真正习惯使用 jQuery。任何帮助将不胜感激，因为我已经盯着这个已经有一段时间了。

我正在尝试使用getElementByClassName并取得了一些成功，但并不完全成功。我有这个html

<p><input type="button" value="nightmare" onClick="nightmare();"></p>
<div id="form" style="width:810px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:12px;">
<div id="column1" style="width:250px; padding:5px 10px 5px 10px; float:left">
    <form name="checkForm1" id="checkForm1">
        <span class="all"><input type="checkbox" id="att_1" name="att_1" class="all" onChange="">Single-sided</span><br />
        <span class="bernini"><input type="checkbox" id="att_2" name="att_2" onChange="">Visible Banner: 33.5" x 36"-78.7"</span><br />
        <span class="picasso"><input type="checkbox" id="att_3" name="att_3" onChange="">Medium Duty Spring System</span><br />
        <span class="matisse"><input type="checkbox" id="att_4" name="att_4" onChange="">Clip-in Top Rail</span><br />
        <span class="bernini"><input type="checkbox" id="att_5" name="att_5" onChange="">Adjustable Twist Locking Pole</span><br />
        <span class="bernini"><input type="checkbox" id="att_6" name="att_6" onChange="">Single graphic use</span><br />
        <span class="all"><input type="checkbox" id="att_7" name="att_7" onChange="">Carrying case included</span><br />
        <span class="all"><input type="checkbox" id="att_8" name="att_8" onChange="">Silver finish</span><br />
    </form>
</div></div>

而这个 js

function nightmare(){var berninis = document.getElementsByClassName('picasso matisse');for(var i = 0; i < berninis.length; i++) {berninis[i].style.color="#d1d1d1";}}

现在，如果我在函数中只有 1 个类，它可以工作，但一旦我同时完成这两个类，它就不再有效。