javascript - 有没有办法禁用传单图层控件中的单选按钮？

Question

我正在寻找一种方法来选择/禁用基本 map 中的单个单选按钮。这是我的代码。

这为 myleaflet 层创建了 baseMap

baseMap = {
    Map View: mapQuestOpenEnglish
    Satelite View: mapQuestAerial
}

mapControl = L.control.layers(baseMap)

最后，我将 mapControl 添加到 map 中，它会生成以下 html

<div class="leaflet-control-layers leaflet-control" aria-haspopup="true">
  <a class="leaflet-control-layers-toggle" href="#" title="Layers"></a>
  <form class="leaflet-control-layers-list">
    <div class="leaflet-control-layers-base">
      <label>
        <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers" checked="checked">
        <span> 
          <span class="default-map">Map View</span>
        </span>
      </label>
      <label>
        <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers">
        <span> 
          <span class="staelite-map">Satelite View</span>
        </span>
      </label>
    </div>
  </form>
</div>

我想要一种能够选择/禁用此单选按钮的方法。

<input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers">

有什么简单的方法可以做到这一点吗？非常感谢任何帮助

Answer 1

好吧，不是很干净，但是可以...

您可以通过其各自的 span 标签类选择所需的 radio 元素。这是一个简单的 JS 方法:

function SelectRadio(span_class) {
    var span = document.getElementsByClassName(span_class)[0];
    var radio = span.parentNode.parentNode.getElementsByTagName('radio')[0];
    return radio;
}

你可以这样调用它:

var element = SelectRadio('staelite-map');
/* Here you'll have the DOM Element. Just use it to enable/disable,
      set selection, or anything else */