如何实现同一行内的Checkbox、文本输入框与价格标签？

一、布局修正（基于Bootstrap栅格系统） #

原代码未利用Bootstrap栅格分配元素宽度，导致排列混乱。改用row+col类规划布局，同时修正重复ID的问题（HTML中ID必须唯一），让Checkbox、选项名称、数量框、价格标签在一行合理分布。

二、交互功能实现（勾选激活输入框） #

默认让数量输入框处于禁用状态，通过JavaScript监听Checkbox的勾选事件，实现“勾选启用、取消勾选禁用并清空”的逻辑。

完整可运行代码 #

HTML（结合Bootstrap栅格）

<form role="form">
  <!-- 选项1 -->
  <div class="row align-items-center mb-3">
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="option1Check">
      </div>
    </div>
    <div class="col-auto">
      <span class="option-name">Option 1</span>
    </div>
    <div class="col-md-2">
      <input type="number" class="form-control quantity-input" id="option1Qty" disabled min="1" value="1">
    </div>
    <div class="col-auto">
      <span class="price-tag">$2.99</span>
    </div>
  </div>

  <!-- 选项2 -->
  <div class="row align-items-center mb-3">
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="option2Check">
      </div>
    </div>
    <div class="col-auto">
      <span class="option-name">Option 2</span>
    </div>
    <div class="col-md-2">
      <input type="number" class="form-control quantity-input" id="option2Qty" disabled min="1" value="1">
    </div>
    <div class="col-auto">
      <span class="price-tag">$2.99</span>
    </div>
  </div>

  <!-- 选项3 -->
  <div class="row align-items-center mb-3">
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="option3Check">
      </div>
    </div>
    <div class="col-auto">
      <span class="option-name">Option 3</span>
    </div>
    <div class="col-md-2">
      <input type="number" class="form-control quantity-input" id="option3Qty" disabled min="1" value="1">
    </div>
    <div class="col-auto">
      <span class="price-tag">$2.99</span>
    </div>
  </div>
</form>

CSS（匹配预期样式）

.option-name {
  padding: 10px 20px;
  background: #66bb6a;
  color: #F7F5F5;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 400;
  border: 1px solid #ddd;
  text-shadow: 1px 0px 3px #6F6F6F;
  min-width: 150px;
  display: inline-block;
}

.price-tag {
  background: #66bb6a;
  color: #fff;
  font-weight: 400;
  padding: 10px 15px;
  border: 1px solid #66bb6a;
  transition: all 0.3s ease;
}

.quantity-input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

JavaScript（交互逻辑）

// 监听所有复选框状态变化
document.querySelectorAll('.form-check-input').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 通过ID命名规则关联对应输入框
    const inputId = this.id.replace('Check', 'Qty');
    const inputBox = document.getElementById(inputId);
    
    if (this.checked) {
      inputBox.disabled = false;
    } else {
      inputBox.disabled = true;
      inputBox.value = ''; // 取消勾选时清空输入框
    }
  });
});

关键说明 #

1. 布局上用row align-items-center让行内元素垂直居中，col-auto自动适配内容宽度，col-md-2给输入框设置固定宽度，同时兼容移动端布局。
2. 输入框使用type="number"并设置min="1"，更贴合数量输入的业务场景。
3. JS通过ID命名关联复选框和输入框，新增选项时只要遵循optionXCheck对应optionXQty的规则，就能自动适配交互逻辑。

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