HTML选中select的指定项后text不可编辑

Foreword

这周好忙，Coursera也没来得及看，在公司做网页设计，为了保持我优快云每周不断更，所以还是抽点时间写点儿东西。那就来说一下昨天晚上花费了我一个小时的bug！

要是我能在今天之前写完我就再来谈谈这周感想。

昨天晚上睡不着的时候脑子里想了很多东西，想HTML怎么写，不过我发现我每次躺床上想学术问题第二天一定忘得一干二净。更多的是一种夜深人静之后才会显现出的烦躁恐惧焦虑，被白天忙忙碌碌压抑了的情感。之前看《人名的名义》中印象最深的是祁同伟最后说的“胜天半子”，人生如棋，也如赌局，一直以来都很想去赌我会赢，虽然现在不知道最后会不会输，反正是赢不了。大概有这个想法的时候就已经注定无法赢的漂亮了，因为“半子”就是命运与我力量差距的体现，每一步都要如履薄冰最终只会摔的更疼。

虽然我一直很喜欢宗教文化，原本以为就算有一天我成了信徒，那也一定是因为宗教艺术，但没想到我竟然有一天会想要相信“来世”这种宗教信仰，有这种想法的时候被自己吓到了。命运让我注定无法实现的梦想，无法拥有的生活，我必须接受吗，可是我之前就是个“胜天半子”的赌徒啊，我怎么甘心放弃呢，所以如果有“来世”，我就可以寄托希望。那些信徒们呀，可能都有自己的苦处吧，只有这种虚无缥缈的前世和来生，才可以化解他们的悲痛，给他们奋斗下去的动力。可怜可笑可悲。

可能人想的多了就会奇奇怪怪。原本打算每天运动的，结果这周就下雨了，我命由天不由我啊，希望下周好天气，给我一点儿情绪宣泄的出口。

目标功能及现象

我想要达到的效果：

• 将本地IP、子网掩码、网关地址分为四段输入，并且控制文本输入框大小
• 读取select选中项
• 当IP地址类型选择DHCP时，本地IP、子网掩码、网关地址的文本输入框都不可编辑。

效果虽然有点儿丑，但大概就是这样。

控制文本框大小

• 最简单的一种就是直接在HTML的input里加属性，类似于这样：

  <!-- HTML -->
  <input id="staticIPInput1" type="text" value="192" style="width:80px;">
  

  但是因为我有12个文本框嘛，我想在CSS里修改文本框属性，一次性配置12个文本框（然后就开始作了）……

• 还是有办法的，就是给自己埋下了一大颗雷

  （这个写法太流氓了，12个文本框共用一个id，现在想想就不对嘛……）

  /* CSS */
  input#IPInput{
      width:80px;
  }
  

  <!-- HTML -->
  <input id="IPInput" type="text" name="staticIPValue" value="">&nbsp;-
  <input id="IPInput" type="text" name="staticIPValue" value="">&nbsp;-
  <input id="IPInput" type="text" name="staticIPValue" value="">&nbsp;-
  <input id="IPInput" type="text" name="staticIPValue" value="">
  

读取select选中项

通过id找到select，提取选中项的value

// javascript
function IPModeSelection() {
    var index = document.getElementById("IPMode").selectedIndex;
    var val = document.getElementById("IPMode").options[index].value;
    console.log(val.toString());
}

选中select指定项后文本框不可编辑

• readonly

  文本框不可修改，但是可以选中或复制

  <!-- HTML -->
  <input type="text" name="input1" value="不可编辑文本框" readonly>
  

• disabled

  文本框不可修改，不可选中，不可复制

  <!-- HTML -->
  <input type="text" name="input1" value="不可编辑文本框" disabled>
  

• 在js里修改文本框属性

  // javascript
  function IPModeSelection() {
      var index = document.getElementById("IPMode").selectedIndex;
      var val = document.getElementById("IPMode").options[index].value;
      console.log(val.toString());
      if (val == "DHCPIPSelection") {
          for (var i = 1; i < 5; i++) {
              document.getElementById("staticIPInput" + i.toString()).disabled = true;
              document.getElementById("subnetMaskInput" + i.toString()).disabled = true;
              document.getElementById("gatewayAddressInput" + i.toString()).disabled = true;
          }
      } else {
          for (var i = 1; i < 5; i++) {
              document.getElementById("staticIPInput" + i.toString()).disabled = false;
              document.getElementById("subnetMaskInput" + i.toString()).disabled = false;
              document.getElementById("gatewayAddressInput" + i.toString()).disabled = false;
          }
      }
  }
  

Conclusion

出错的原因就是文本框共用了一个id，所以js里面document.getElementById就有问题了，再加上我从getElementsByName改回ById的时候s没删掉……js都不报个错嘛。