<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>:enabled 和 :disabled 示例 — 运单</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px auto;
      max-width: 460px;
    }

    fieldset {
      padding: 10px 30px 0;
      margin-bottom: 20px;
    }

    legend {
      color: white;
      background: black;
      padding: 5px 10px;
    }

    fieldset > div {
      margin-bottom: 20px;
      display: flex;
    }

    button, label, input[type="text"] {
      display: block;
      font-family: inherit;
      font-size: 100%;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      width: 100%;
      padding: 5px;
      height: 30px;
    }

    input {
      box-shadow: inset 1px 1px 3px #ccc;
      border-radius: 5px;
    }

    input:hover, input:focus {
      background-color: #eee;
    }

    input[type="text"]:disabled {
        background: #eee;
        border: 1px solid #ccc;
    }

    .disabled-label {
      color: #aaa;
    }

    button {
      width: 60%;
      margin: 0 auto;
    }
  </style>
</head>

<body>
    <form>
      <fieldset id="shipping">
        <legend>收获地址</legend>
        <div>
          <label for="name1">收件人：</label>
          <input id="name1" name="name1" type="text" required>
        </div>
        <div>
          <label for="address1">地址：</label>
          <input id="address1" name="address1" type="text" required>
        </div>
        <div>
          <label for="pcode1">邮编：</label>
          <input id="pcode1" name="pcode1" type="text" required>
        </div>
      </fieldset>
      <fieldset id="billing">
        <legend>账单地址</legend>
        <div>
          <label for="billing-checkbox">与收获地址一致</label>
          <input type="checkbox" id="billing-checkbox" checked>
        </div>
        <div>
          <label for="name" class="billing-label disabled-label">收件人：</label>
          <input id="name" name="name" type="text" disabled required>
        </div>
        <div>
          <label for="address2" class="billing-label disabled-label">地址：</label>
          <input id="address2" name="address2" type="text" disabled required>
        </div>
        <div>
          <label for="pcode2" class="billing-label disabled-label">邮编：</label>
          <input id="pcode2" name="pcode2" type="text" disabled required>
        </div>
      </fieldset>

      <div><button>提交</button></div>
    </form>

    <script>
      // 等待页面加载完毕
      document.addEventListener('DOMContentLoaded', function () {

        // 为单选按钮添加 ‘change’ 事件监听器
        document.getElementById('billing-checkbox').addEventListener('change', toggleBilling);
      }, false);

      function toggleBilling() {
        // 选择账单文本框
        let billingItems = document.querySelectorAll('#billing input[type="text"]');
        // 选择账单文本标签
        let billingLabels = document.querySelectorAll('.billing-label');

        // 点击账单文本框和标签
        for (let i = 0; i < billingItems.length; i++) {
          billingItems[i].disabled = !billingItems[i].disabled;

          if(billingLabels[i].getAttribute('class') === 'billing-label disabled-label') {
            billingLabels[i].setAttribute('class', 'billing-label');
          } else {
            billingLabels[i].setAttribute('class', 'billing-label disabled-label');
          }
        }
      }
    </script>
</body>

</html>
