Leaflet控件单选框无法保持禁用状态的问题求助

别直接硬改.leaflet-control-layers-selector的DOM属性，Leaflet的图层控件内部会自行管理DOM的渲染状态，比如展开/收起控件时会重新生成元素，你手动加的disabled属性很容易被内部逻辑覆盖——这就是你hover toggle锚点后属性消失的核心原因。推荐用更贴合Leaflet规范的方式实现：

1. 扩展L.Control.Layers类（最稳定方案） #

通过继承Leaflet原生的图层控件类，重写它的_addItem方法，在生成列表项的环节直接给目标底图的单选框加上禁用属性，从根源上控制渲染逻辑：

// 自定义带禁用功能的图层控件
const DisabledLayersControl = L.Control.Layers.extend({
  _addItem: function (obj) {
    // 先调用原生方法生成列表项
    const item = L.Control.Layers.prototype._addItem.call(this, obj);
    // 检查当前图层是否标记为禁用（用自定义属性区分）
    if (obj.layer.options.isDisabled) {
      const input = item.querySelector('.leaflet-control-layers-selector');
      if (input) {
        input.disabled = true;
        // 可选：加视觉样式区分禁用状态
        item.style.opacity = 0.6;
        item.style.pointerEvents = 'none';
      }
    }
    return item;
  }
});

// 定义底图时给需要禁用的图层加自定义属性
const baseLayers = {
  "常规底图": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
  "需禁用的底图": L.tileLayer('https://example.com/tiles/{z}/{x}/{y}.png', { isDisabled: true })
};

// 初始化并添加自定义控件到地图
const layersControl = new DisabledLayersControl(baseLayers).addTo(map);

2. 监听控件展开事件补全禁用属性 #

如果不想扩展控件，也可以监听图层控件的expand事件，在控件展开时重新给目标单选框设置disabled属性——不过这种方案依赖DOM选择器，稳定性不如扩展类：

const layersControl = L.control.layers(baseLayers).addTo(map);

// 控件展开时重新设置禁用属性
layersControl.on('expand', function() {
  // 通过底图的label文本定位目标单选框（根据你的实际文本调整）
  const disabledInput = document.querySelector('.leaflet-control-layers-list label:contains("需禁用的底图") .leaflet-control-layers-selector');
  if (disabledInput) {
    disabledInput.disabled = true;
  }
});

关键原因说明 #

Leaflet的L.Control.Layers在触发展开（hover toggle按钮）时会调用内部的_update方法重新渲染整个列表，之前手动修改的DOM属性会被新生成的元素覆盖。只有通过API钩子（比如重写_addItem）或者监听控件的生命周期事件，才能确保禁用状态持续生效。

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