单选按钮控制输入框禁用：querySelector有效但querySelectorAll无效

我尝试制作一个表单区域，当用户选择「自提（Pick-up）」选项时该区域禁用，选择「配送（Delivery）」选项时可访问。以下是我的代码：

我的JavaScript代码 #

document.getElementById('delivery').onclick = function() {
        var disabled = document.querySelectorAll(".disabled").disabled;
        if (disabled) {
            document.querySelectorAll(".disabled").disabled = false;
        }
        else {
            document.querySelectorAll(".disabled").disabled = true;
        }
    }

我的HTML代码 #

<!--The toggle button-->

<div class="radio-choice">
  <input type="radio" name="pickup-delivery" id="pickup" value="pickup">Pick-up</input>
  <input type="radio" name="pickup-delivery" id="delivery" value="delivery">Delivery</input>
</div>


<!--The part that should be disable if user choose pick-up method-->

  <label for="street_address" class="delivery-label disabled-label">Street Address:</label>
      <input type="text" id="street_address" class="disabled" name="street_address" disabled>
    
      <label for="city" class="delivery-label disabled-label">City:</label>
      <input type="text" id="city" class="disabled" name="city" disabled>
    
      <label for="zip_code" class="delivery-label disabled-label">Zip Code:</label>
      <input type="text" id="zip_code" class="disabled" name="zip_code" disabled>

奇怪的是，这段代码使用querySelector时可生效但仅针对单个元素，使用querySelectorAll时却无法生效。我刚接触编程，仅使用原生JavaScript，未使用jQuery，恳请帮忙解答。

问题根源 #

querySelectorAll()返回的是NodeList（节点列表），这是一个包含多个DOM元素的集合，不是单个元素。你直接给这个集合设置disabled属性是无效的，必须遍历集合里的每一个元素，单独设置它们的disabled状态。而querySelector()只会返回第一个匹配的元素，所以能生效但只能修改一个元素。

另外，你只给「配送」按钮绑定了click事件，没有处理「自提」按钮的选择逻辑，会导致切换回自提时表单区域不会重新禁用。

修正后的代码 #

JavaScript部分

// 获取所有名称为pickup-delivery的单选按钮
const radioButtons = document.querySelectorAll('input[name="pickup-delivery"]');

// 给每个单选按钮绑定change事件（比click更适配键盘操作）
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 获取所有需要控制的表单元素
    const formFields = document.querySelectorAll('.disabled');
    // 判断是否需要禁用：选中自提时禁用，配送时启用
    const shouldDisable = this.value === 'pickup';
    // 遍历每个表单元素，设置disabled状态
    formFields.forEach(field => {
      field.disabled = shouldDisable;
    });
  });
});

HTML优化（可选）

给「自提」按钮加上checked属性，让初始状态和表单的禁用状态匹配：

<input type="radio" name="pickup-delivery" id="pickup" value="pickup" checked>Pick-up</input>

代码说明 #

1. 监听change事件：相比click，change事件在用户通过键盘切换单选按钮时也能触发，逻辑更严谨。
2. 遍历单选按钮：确保两个选项的切换都能触发状态变更。
3. 遍历表单元素集合：通过forEach遍历querySelectorAll返回的NodeList，给每个元素单独设置disabled属性。

内容的提问来源于stack exchange，提问作者Reggroy