When I select the username1 option from the dropdown, the toggle for spec view in the right card should turn off. However, the code is not functioning as expected.
html code:
<div class="container">
<div class="row row-cols-2">
<div class="col">
<div class="card">
<div class="card-body">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" id="username1">Username1</a>
<a class="dropdown-item" href="#" id="username2">Username2</a>
<a class="dropdown-item" href="#" id="username3">Username3</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<div id="switch">
<label for="fname">Spec View</label>  <input id="specview" type="checkbox" checked data-toggle="toggle" data-onstyle="info" data-offstyle="light"></br>
<label for="fname">Spec Edit</label>  <input type="checkbox" checked data-toggle="toggle" data-onstyle="info" data-offstyle="light"></br>
<label for="fname">Attribute Edit</label>  <input type="checkbox" checked data-toggle="toggle" data-onstyle="info" data-offstyle="light"></br>
// More labels and checkbox inputs here...
</div>
</div>
</div>
</div>
</div>
</div>
js code:
$(document).ready(function(){
$("#username1").click(function(){
var elmnt = document.getElementById("specview");
var attr = elmnt.getAttributeNode("checked");
elmnt.removeAttributeNode(attr);
});
});
The Bootstrap toggle library used: Project link:https://codepen.io/nutkin/pen/KKgJNMd