如何启用/禁用带PHP动态变量ID的HTML输入框？

针对你提到的id="qty_<?php echo $x; ?>"这类动态生成ID的输入框，这里提供几种实用的解决方案，根据你的场景选择即可：

方案1：统一类名控制（最简洁可靠） #

不用纠结动态ID，给所有目标输入框加个共同的类名，比如qty-input，JS直接通过类选择器批量操作：

HTML（PHP生成时） #

<input type="number" id="qty_<?php echo $x; ?>" class="qty-input" />

JS代码 #

// 获取控制按钮
const toggleBtn = document.getElementById('toggle-all-qty');

// 绑定点击事件，切换所有输入框状态
toggleBtn.addEventListener('click', () => {
  document.querySelectorAll('.qty-input').forEach(input => {
    input.disabled = !input.disabled;
  });
});

控制按钮 #

<button id="toggle-all-qty">切换所有数量输入框状态</button>

方案2：ID前缀匹配（无需修改HTML生成逻辑） #

如果没法修改PHP输出的HTML，用CSS属性选择器筛选ID以qty_开头的输入框：

JS代码 #

const toggleBtn = document.getElementById('toggle-all-qty');

toggleBtn.addEventListener('click', () => {
  // 匹配所有ID以qty_开头的input元素
  document.querySelectorAll('input[id^="qty_"]').forEach(input => {
    input.disabled = !input.disabled;
  });
});

方案3：单个输入框单独控制 #

如果需要给每个输入框配独立的控制按钮，直接在PHP循环里把动态ID传给JS函数：

PHP+HTML代码 #

<?php 
// 示例循环生成输入框和对应按钮
for ($x = 1; $x <= 3; $x++) {
?>
  <div>
    <input type="number" id="qty_<?php echo $x; ?>" />
    <button onclick="toggleQty('qty_<?php echo $x; ?>')">切换状态</button>
  </div>
<?php } ?>

JS函数 #

function toggleQty(inputId) {
  const input = document.getElementById(inputId);
  if (input) {
    input.disabled = !input.disabled;
  }
}

这些方案都能完美解决动态ID输入框的禁用/启用切换问题，根据你的实际需求选择即可。

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