如何在单击另一个切换按钮时禁用 Bootstrap 切换按钮？

Question

我的代码需要帮助。我在互联网上看了很多，但我找到的代码不起作用。

我有两个切换按钮（hg-geraet-b、hg-geraet-v）。

默认情况下，“hg-geraet-v”按钮不应该被选中和停用。如果按下按钮“hg-geraet-b”（切换激活），按钮“hg-geraet-v”应该是可选的。如果您现在选中按钮“hg-geraet-v”以激活，按钮“hg-geraet-b”应该被重置并且不再可选择。

我必须将哪个 Java 代码插入到我代码末尾的中，这样它才有效？

<div>
<label><input type="checkbox" name="product" class="card-input-element" />
<div class="card text-center">
 <p>Header</p>
  <div class="card-body">
  <p class="card-text">Kategorie</p>
  
  <div><input id="hg-geraet-b" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Beraten" data-off="Beraten">
  </div>
  <div><input onclick="hg-geraet-v" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Verkauft" data-off="Verkauft">
  </div>
  </div>
  </div>
</label>
</div>

Answer 1

试试这个：

const hgGeraetB = document.querySelector('#hg-geraet-b'),
  hgGeraetV = document.querySelector('#hg-geraet-v');

const handleChange = () => {
  if (hgGeraetB.checked) {
    hgGeraetV.disabled = false;
  } else if (hgGeraetV.checked) {
    hgGeraetB.checked = false;
    hgGeraetB.disabled = true;
  }
}

hgGeraetB.addEventListener('change', handleChange)
hgGeraetV.addEventListener('change', handleChange)

<div>
  <label><input type="checkbox" name="product" class="card-input-element" />
    <div class="card text-center">
      <p>Header</p>
      <div class="card-body">
        <p class="card-text">Kategorie</p>f

        <div><input id="hg-geraet-b" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary"  data-size="sm" data-on="Beraten" data-off="Beraten">
        </div>
        <div><input id="hg-geraet-v" type="checkbox" disabled='true' data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Verkauft" data-off="Verkauft">
        </div>
      </div>
    </div>
  </label>
</div>

如何在单击另一个切换按钮时禁用 Bootstrap 切换按钮？

How to disable Bootstrap Toggle-Buttons on click at another Toggle Button?

javascript

toggle

twitter-bootstrap