Django表格中Toggle Switch仅单行生效其余行不工作如何解决？

问题原因 #

1. 重复ID冲突：HTML规范要求ID全局唯一，你在循环生成表格行时给所有Toggle开关设置了相同的id="statuschange"，jQuery的ID选择器$("#statuschange")只会匹配到页面中第一个符合条件的元素，因此只有第一行的开关能触发绑定的事件。
2. 缺少用户标识参数：原AJAX请求没有传递当前操作的用户ID，后端无法判断要修改哪个用户的is_active状态。
3. 开关状态逻辑错误：原代码中开关的checked属性判断逻辑写反，会导致开关显示状态和数据库中实际的is_active值不匹配，还额外写死了一个多余的checked属性。

修复步骤 #

1. 修改模板中Toggle开关的代码 #

替换循环内的input标签代码，删除重复ID，改用class绑定事件，新增data属性存储用户ID，修正状态判断逻辑：

<input type="checkbox" 
       name="is_active" 
       data-toggle="toggle" 
       class="status-change-toggle" 
       data-user-id="{{ user.id }}"
       data-on="Activate" 
       data-off="Deactivate" 
       data-size="xs"  
       data-onstyle="success"
       data-offstyle="danger"  
       {% if user.is_active %} checked {% endif %}>

2. 修改事件绑定的JS代码 #

改用class选择器绑定所有开关的事件，传递用户ID和当前开关状态到后端：

$(document).ready(function() {
  // 绑定所有开关的change事件
  $(".status-change-toggle").on("change", function() {
    const userId = $(this).data('user-id');
    const isActive = this.checked;
    $.ajax({
      url: "{% url 'admin:deactivate_user' %}",
      data: {
        csrfmiddlewaretoken: "{{ csrf_token }}",
        user_id: userId,
        is_active: isActive
      },
      type: "POST",
      dataType : "json",
    })
    .done(function(data) {
      console.log(data);
      if (data.code === 0) {
        swal("Success", "用户状态更新成功", "success");
        // 如需无刷新更新页面状态，可以在这里修改当前行的状态图标，或者直接刷新页面
        // location.reload();
      } else {
        swal("Error", data.msg || "状态更新失败", "error");
      }
    })
    .fail(function() {
      swal("Error", "网络请求异常，请重试", "error");
    })
    .always(function() {
      console.log('[Done]');
    })
  })
});

3. 补充后端视图逻辑（Django示例） #

后端接收参数修改对应用户的状态，返回JSON格式的响应：

from django.http import JsonResponse
from django.contrib.auth import get_user_model

User = get_user_model()

def deactivate_user(request):
    if request.method != 'POST':
        return JsonResponse({'code': 1, 'msg': '非法请求方式'})
    try:
        user_id = request.POST.get('user_id')
        is_active = request.POST.get('is_active') == 'true'
        target_user = User.objects.get(id=user_id)
        target_user.is_active = is_active
        target_user.save()
        return JsonResponse({'code': 0, 'msg': '状态更新成功'})
    except User.DoesNotExist:
        return JsonResponse({'code': 1, 'msg': '目标用户不存在'})
    except Exception as e:
        return JsonResponse({'code': 1, 'msg': f'更新失败：{str(e)}'})

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