HTML+JavaScript实现按钮单独控制对应行输入框的激活与禁用

问题原因 #

你当前代码的核心问题是直接使用$("input")全局选择器匹配页面所有输入框，没有限定操作范围为当前按钮对应的分组输入框，因此触发任意按钮都会修改全部输入框的启用状态。

调整方案 #

方案一（推荐，代码更易维护） #

步骤1：优化HTML结构

给每个分组统一套上相同类名的父容器，同时给所有按钮组加上统一的类名，避免重复绑定事件：

<!-- 第一组 -->
<div class="control-group">
  <div class="btn-group toggle-btn" data-toggle="buttons">
    <label class="btn btn-default"> Activar1   
    </label>
  </div> 
  <input type="text" disabled="disabled" class="prueba"/>
  <input type="text" disabled="disabled" class="prueba"/>
</div>

<!-- 第二组 -->
<div class="control-group">
  <div class="btn-group toggle-btn" data-toggle="buttons">
    <label class="btn btn-default"> Activar2   
    </label>
  </div> 
  <input type="text" disabled="disabled" class="prueba"/>
  <input type="text" disabled="disabled" class="prueba"/>
</div>

<!-- 第三组 -->
<div class="control-group">
  <div class="btn-group toggle-btn" data-toggle="buttons">
    <label class="btn btn-default"> Activar3   
    </label>
  </div> 
  <input type="text" disabled="disabled" class="prueba"/>
  <input type="text" disabled="disabled" class="prueba"/>
</div>

步骤2：简化JavaScript逻辑

仅绑定一次事件，通过DOM遍历找到当前按钮所在分组下的输入框进行操作：

$('body').on('click', '.toggle-btn', function(event) {
  // 切换当前按钮激活状态
  if ($(this).attr('data-toggle') != 'button') {
    $(this).toggleClass('active');
  }
  // 查找当前按钮所属分组下的对应输入框
  const $targetInputs = $(this).closest('.control-group').find('input.prueba');
  // 根据激活状态修改输入框禁用属性
  $targetInputs.prop('disabled', !$(this).hasClass('active'));
});

方案二（不修改原有HTML结构） #

如果不想改动现有HTML代码，只需把原有JS里的全局输入框选择器，替换为当前按钮对应的分组输入框选择即可：

// 以Activar1的逻辑为例，另外两个按钮同理修改选择范围
$( 'body' ).on( 'click', '#1', function(event) {    
  if( $(this).attr('data-toggle') != 'button' ) { 
    $(this).toggleClass('active');      
  }
  // 只选择当前按钮后面的两个兄弟输入框
  const $targetInputs = $(this).nextAll('input.prueba').slice(0,2);
  $targetInputs.prop('disabled', !$(this).hasClass('active'));
});

// Activar2逻辑调整
$( 'body' ).on( 'click', '#2', function(event) {    
  if( $(this).attr('data-toggle') != 'button' ) { 
    $(this).toggleClass('active');      
  }
  // 选择当前按钮父容器下的两个输入框
  const $targetInputs = $(this).parent().find('input.prueba');
  $targetInputs.prop('disabled', !$(this).hasClass('active'));
});

// Activar3逻辑和Activar2完全一致，直接复用即可

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