单选按钮在第二个视图中无法选择

Question

我的代码中有很多部分。

我遇到的问题是我有一个选择哪个显示选项可用。根据所选的选项，div将隐藏或显示包含与该选项可用尺寸相对应的单选按钮。有些是可用的，有些则不是。使用PHP从数据库中检索所有值。选择工作正常，单选按钮隐藏和显示预期。进/出库存单选按钮显示正常。但是，在第一组我可以选择大小，在2 ^nd 集合我不能。有任何想法吗？

我在页面上有Javascript和jQuery，不确定是否存在冲突。我只是不知道还有什么可以尝试。基本上，页面加载默认单选按钮，然后根据选择单选按钮更改。正如我所说，一切都按照我的预期进行，但我无法在div内使用id="74"选择一个单选按钮。 "74-EE"工作正常。

Fiddle

上的演示

HTML：

<input type="hidden" name="code" value="M3105" />
<div class=styled-select>
  <select name="options" id="select" onChange="handleSelection(value) ">
    <option value="DEFAULT" selected>Select option to see available sizes<img src="images/turqarrow.png" width="10" height="10" ></option>
    <option value="74-EE">Option 1:   Toe:7 Heel:4 Width:EE</option>
    <option value="74">Option 2:   Toe:7 Heel:4</option>
  </select>
</div>
<br><h3><b>Choose a Size:</b><h3>
<div class="hide" id="74-EE">
  <div class=radio_button>
    <input type="radio" disabled name="size" value="6" id="6" /><label for="6" class="out-stock" >6</label>
    <input type="radio" disabled name="size" value="6.5" id="6.5" /><label for="6.5" class="out-stock" >6.5</label>
    <input type="radio" disabled name="size" value="7" id="7" /><label for="7" class="out-stock" >7</label>
    <input type="radio" disabled name="size" value="7.5" id="7.5" /><label for="7.5" class="out-stock" >7.5</label>                
    <input type="radio" disabled name="size" value="8" id="8" /><label for="8" class="out-stock" >8</label>
    <input type="radio" name="size" value="8.5" id="8.5" /><label for="8.5" class="in-stock" >8.5</label>
    <input type="radio" disabled name="size" value="9" id="9" /><label for="9" class="out-stock" >9</label>
    <input type="radio" name="size" value="9.5" id="9.5" /><label for="9.5" class="in-stock" >9.5</label>
    <input type="radio" disabled name="size" value="10" id="10" /><label for="10" class="out-stock" >10</label>
    <input type="radio" name="size" value="10.5" id="10.5" /><label for="10.5" class="in-stock" >10.5</label>
    <input type="radio" disabled name="size" value="11" id="11" /><label for="11" class="out-stock" >11</label>
    <input type="radio" disabled name="size" value="11.5" id="11.5" /><label for="11.5" class="out-stock" >11.5</label>
    <input type="radio" disabled name="size" value="12" id="12" /><label for="12" class="out-stock" >12</label>
  </div>
</div>
<div class="hide" id="74">
  <div class=radio_button><input type="radio" name="size" value="6" id="6" /><label for="6" class="in-stock" >6</label>
    <input type="radio" disabled name="size" value="6.5" id="6.5" /><label for="6.5" class="out-stock" >6.5</label>
    <input type="radio" disabled name="size" value="7" id="7" /><label for="7" class="out-stock" >7</label>
    <input type="radio" disabled name="size" value="7.5" id="7.5" /><label for="7.5" class="out-stock" >7.5</label>        
    <input type="radio" disabled name="size" value="8" id="8" /><label for="8" class="out-stock" >8</label>
    <input type="radio" disabled name="size" value="8.5" id="8.5" /><label for="8.5" class="out-stock" >8.5</label>    
    <input type="radio" disabled name="size" value="9" id="9" /><label for="9" class="out-stock" >9</label>
    <input type="radio" disabled name="size" value="9.5" id="9.5" /><label for="9.5" class="out-stock" >9.5</label>    
    <input type="radio" disabled name="size" value="10" id="10" /><label for="10" class="out-stock" >10</label>
    <input type="radio" disabled name="size" value="10.5" id="10.5" /><label for="10.5" class="out-stock" >10.5</label>
    <input type="radio" disabled name="size" value="11" id="11" /><label for="11" class="out-stock" >11</label>
    <input type="radio" disabled name="size" value="11.5" id="11.5" /><label for="11.5" class="out-stock" >11.5</label>
    <input type="radio" disabled name="size" value="12" id="12" /><label for="12" class="out-stock" >12</label>
  </div>
</div>
<div class="hide" id="DEFAULT">
  <div class=radio_button><input type="radio" disabled name="2size" value="7" id="7" /><label for="7" class="out-stock" >7</label>
    <input type="radio" disabled name="size" value="7.5" id="7.5" /><label for="7.5" class="out-stock" >7.5</label>    
    <input type="radio" disabled name="size" value="8" id="8" /><label for="8" class="out-stock" >8</label>
    <input type="radio" disabled name="size" value="8.5" id="8.5" /><label for="8.5" class="out-stock" >8.5</label>
    <input type="radio" disabled name="size" value="9" id="9" /><label for="9" class="out-stock" >9</label>
    <input type="radio" disabled name="size" value="9.5" id="9.5" /><label for="9.5" class="out-stock" >9.5</label>    
    <input type="radio" disabled name="size" value="10" id="10" /><label for="10" class="out-stock" >10</label>
    <input type="radio" disabled name="size" value="10.5" id="10.5" /><label for="10.5" class="out-stock" >10.5</label>
    <input type="radio" disabled name="size" value="11" id="11" /><label for="11" class="out-stock" >11</label>
    <input type="radio" disabled name="size" value="11.5" id="11.5" /><label for="11.5" class="out-stock" >11.5</label>
    <input type="radio" disabled name="size" value="12" id="12" /><label for="12" class="out-stock" >12</label>
    <input type="radio" disabled name="size" value="12.5" id="12.5" /><label for="12.5" class="out-stock" >12.5</label>
    <input type="radio" disabled name="size" value="13" id="13" /><label for="13" class="out-stock" >13</label>
  </div>
</div>
<div style="float:right;">
  <input type="submit" value="Contact to Order" class="submit" />
</div>

的JavaScript：

function handleSelection(choice) {

  if (choice == '74') {
    document.getElementById('74-EE').style.display = "none";
    document.getElementById('DEFAULT').style.display = "none";
    document.getElementById(choice).style.display = "block";
  } else if (choice == '74-EE') {
    document.getElementById('74').style.display = "none";
    document.getElementById('DEFAULT').style.display = "none";
    document.getElementById(choice).style.display = "block";
  } else {
    document.getElementById('74').style.display = "none";
    document.getElementById('74-EE').style.display = "none";
    document.getElementById('DEFAULT').style.display = "block";
  }
}
window.onload = handleSelection("DEFAULT");

CSS：

.radio_button input[type="radio"] {
    display: none;
    background-color: #FFFFFF;
}
input[type="radio"]:checked + label {
    background-color: #272014;
}
.in-stock {
    display: inline-block;
    height: 20px;
    margin-right: 17px;
    text-decoration: none;
    width: 30px;
    margin-top: 10px;
    text-align: center;
    color: #FFFFFF;
    background-color: #04AAB0;
}
.out-stock {
    display: inline-block;
    height: 20px;
    margin-right: 17px;
    text-decoration: none;
    width: 30px;
    margin-top: 10px;
    text-align:center;
    color: #FFFFFF;
    background-color: grey;
}
.hide {
    display: none;
}
.styled-select select {
    width: 250px;
    padding: 3px;
    border: 1px solid #04AAB0;
    border-radius: 0;
    height: 35px;
}
.styled-select {
    width: 250px;
    height: 35px;
    padding: 3px;
    overflow: hidden;
}