Bootstrap开关关闭后Ajax请求仍触发的问题排查

你的问题核心在于重复绑定事件且未在开关关闭时解绑：

• 每次勾选开关时，都会给所有input[id*="opr_"]元素绑定新的keyup change事件处理器
• 当开关关闭时，你只是修改了switchStatus变量，但之前绑定的事件并没有被移除，这些事件会一直存在于元素上，只要输入框触发keyup或change，依然会执行Ajax请求

推荐两种更可靠的实现方式：

方案一：动态绑定/解绑事件 #

在开关勾选时绑定事件，关闭时解绑对应的事件处理器。注意要给事件处理器命名，方便精准解绑：

<input class="form-check-input" type="checkbox" role="switch" id="right" >

<script>
$(document).ready(function(){
  // 定义单独的事件处理器函数
  function handleInputChange(e) {
    var key_opr = $(this).attr('id');
    var opr = $(this).val();
    $.ajax({
      url: 'check.php',
      type: 'POST',
      data: jQuery.param({ id_game: "<?=$id_game;?>", opr : opr, key_opr : key_opr}) ,
      success:function(data) {
        if(data==1){
          $("#"+key_opr).removeClass('td_fill').removeClass('td_wrong').addClass('td_good'); 
        }else{
          $("#"+key_opr).removeClass('td_fill').removeClass('td_good').addClass('td_wrong'); 
        }
      }
    });
  }

  $('#right').on('change', function() {
    var isChecked = $(this).is(':checked');
    if (isChecked) {
      // 绑定事件
      $('input[id*="opr_"]').on("keyup change", handleInputChange);
    }else{
      // 解绑事件
      $('input[id*="opr_"]').off("keyup change", handleInputChange);
      // 可选：移除输入框的状态类，恢复初始样式
      $('input[id*="opr_"]').removeClass('td_good td_wrong').addClass('td_fill');
    }
  });
});
</script>

方案二：事件内部判断开关状态（更简洁） #

不需要动态绑定/解绑，而是在输入框的事件处理器内部直接判断开关是否勾选，这样逻辑更清晰，也避免重复绑定问题：

<input class="form-check-input" type="checkbox" role="switch" id="right" >

<script>
$(document).ready(function(){
  // 一次性绑定事件，不需要重复绑定
  $('input[id*="opr_"]').on("keyup change", function(e) {
    // 先判断开关是否勾选，未勾选则直接返回
    if (!$('#right').is(':checked')) {
      // 可选：移除状态类，恢复初始样式
      $(this).removeClass('td_good td_wrong').addClass('td_fill');
      return;
    }
    // 开关勾选时才执行Ajax逻辑
    var key_opr = $(this).attr('id');
    var opr = $(this).val();
    $.ajax({
      url: 'check.php',
      type: 'POST',
      data: jQuery.param({ id_game: "<?=$id_game;?>", opr : opr, key_opr : key_opr}) ,
      success:function(data) {
        if(data==1){
          $("#"+key_opr).removeClass('td_fill').removeClass('td_wrong').addClass('td_good'); 
        }else{
          $("#"+key_opr).removeClass('td_fill').removeClass('td_good').addClass('td_wrong'); 
        }
      }
    });
  });
});
</script>

• 可以给Ajax请求添加防抖处理，避免输入时频繁触发请求（比如用户快速输入时，只在停止输入后触发一次）
• 注意jQuery.param可以直接替换为对象形式，data: { id_game: "<?=$id_game;?>", opr : opr, key_opr : key_opr }，jQuery会自动处理参数编码

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