如何实现同一函数的多触发点？多实例toggle复选框解决方案

没问题，要在页面多个位置放置这个触发按钮，核心思路就是用class代替唯一ID来绑定事件，同时可以选择同步所有按钮的状态（避免视觉上的不一致）。下面是具体的修改步骤：

1. 调整HTML结构 #

把原来的id="toggle-event"替换成可复用的class（比如class="toggle-event"），同时给每个按钮分配唯一ID（符合HTML规范，避免ID重复问题）：

<!-- 第一个切换按钮 -->
<input id="toggle-event-1" class="toggle-event" type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger">

<!-- 第二个切换按钮 -->
<input id="toggle-event-2" class="toggle-event" type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger">

<!-- 可继续添加更多同结构按钮 -->

2. 修改jQuery事件绑定逻辑 #

把原来基于ID的选择器$('#toggle-event')改成基于class的$('.toggle-event')，同时推荐同步所有按钮的状态，确保用户点击任意按钮后，所有切换按钮的视觉状态一致：

$(function() {
  // 给所有带toggle-event类的按钮绑定change事件
  $('.toggle-event').change(function() {
    // 获取当前点击按钮的选中状态
    const isChecked = $(this).prop('checked');
    
    // 【推荐】同步所有同class按钮的状态，保证视觉统一
    $('.toggle-event').prop('checked', isChecked);
    
    // 原有业务逻辑保持不变
    if(isChecked){
      $('.textfield, .editable_textfield').toggleClass('textfield editable_textfield');
      $('.textfield, .editable_textfield').editable('option', 'disabled', false);
      $('.editable_selectfield_1').editable({
        source: [
          {value: 'ja', text: 'Ja'},
          {value: 'nee', text: 'Nee'},
        ],
      });
      $('.editable_selectfield_1').editable('option', 'disabled', false);
    } else {
      $('.textfield, .editable_textfield').editable('option', 'disabled', true);
      $('.editable_selectfield_1').editable('option', 'disabled', true);
    }
  });
})

补充说明 #

如果你的需求是每个按钮独立控制不同的元素组，可以给按钮添加自定义data-*属性（比如data-target=".my-group-1"），然后在事件函数里通过$(this).data('target')获取目标元素选择器，再针对性操作即可。

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