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

Question

I need help with my code. I've looked a lot on the internet, but the code i have found doesn't work.

I have two toggle buttons (hg-geraet-b, hg-geraet-v).

The button "hg-geraet-v" should not be selectable and deactivated by default. If the button "hg-geraet-b" is pressed (Toggle to activate), the button "hg-geraet-v" should be selectable. If you now check the button "hg-geraet-v" to activate, the button "hg-geraet-b" should be reset and no longer be selectable.

Which Java code do I have to insert into the < script>...< /script> at the end of my code, so that this works?

 <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

Try this:

 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>