Disable checkboxes when another checkbox is clicked

Question

I have been trying to change the logic of this check-box, The check-box is sitting in an accordion, I want the check-box to disable other checkbook when I click on one check-box.

Here is my code below.

 $(function() { $(':checkbox').click(function() { // Uncheck any other checkboxes except this one $(':checkbox').not($(this)).prop('checked', false); }); }) var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="accordion">MEDIA</button> <div class="panel"> <p><input type="checkbox" name="News" id="News" value="News" class="regular-checkbox" onclick="filter(this.value)" /> News</p> <p><input type="checkbox" name="OfficialStatement" id="OfficialStatement" value="OfficialStatement" class="regular-checkbox" onclick="filter(this.value)" /> Official Statements</p> <p><input type="checkbox" name="Speeches" id="Speeches" value="Speeches" class="regular-checkbox" onclick="filter(this.value)" /> Speech</p> <p><input type="checkbox" name="PressRelease" id="PressRelease" value="PressRelease" class="regular-checkbox" onclick="filter(this.value)" /> Press Release</p> <p><input type="checkbox" name="Communiques" id="Communiques" value="Communiques" class="regular-checkbox" onclick="filter(this.value)" /> Communique</p> <p><input type="checkbox" name="PressConference" id="PressConference" value="PressConference" class="regular-checkbox" onclick="filter(this.value)" /> Press Conference</p> <p><input type="checkbox" name="Interviews" id="Interviews" value="Interviews" class="regular-checkbox" onclick="filter(this.value)" /> Interviews</p> <p><input type="checkbox" name="SuccessStories" id="SuccessStories" value="SuccessStories" class="regular-checkbox" onclick="filter(this.value)" /> Success Stories</p> <p><input type="checkbox" name="SocialMedia" id="SocialMedia" value="SocialMedia" class="regular-checkbox" onclick="filter(this.value)" /> Social Media</p> <p><input type="checkbox" name="PressContact" id="PressContact" value="PressContact" class="regular-checkbox" onclick="filter(this.value)" /> Press Contacts</p> </div> </div> <!--right-right--> </div> <!--right--> 

I will really appreciate your assistance. I have been on this for the past one week.

Answer 1

First, give all checkboxes of the same group, a same class. Then use the following JQuery code to simulate checkboxes as radio buttons . See the code snippet below:

 $( 'input:checkbox' ).on( 'change', function () { var $elm = $( this ), group = 'input:checkbox[class="' + $elm.attr( 'class' ) + '"]'; $( group ).not( this ).prop( 'checked', false ); }); 

 ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) } p { margin: 0 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li class="panel"> <p><b>Group 1:</b></p> <p><input type="checkbox" class="group1" id="News" value="News"/><label for="News"> News</label></p> <p><input type="checkbox" class="group1" id="OfficialStatement" value="OfficialStatement"/><label for="OfficialStatement"> Official Statements</label></p> <p><input type="checkbox" class="group1" id="Speeches" value="Speeches"/><label for="Speeches"> Speech</label></p> <p><input type="checkbox" class="group1" id="PressRelease" value="PressRelease"/><label for="PressRelease"> Press Release</label></p> <p><input type="checkbox" class="group1" id="Communiques" value="Communiques"/><label for="Communiques"> Communique</label></p> </li> <li class="panel"> <p><b>Group 2:</b></p> <p><input type="checkbox" class="group2" id="PressConference" value="PressConference"/><label for="PressConference"> Press Conference</label></p> <p><input type="checkbox" class="group2" id="Interviews" value="Interviews"/><label for="Interviews"> Interviews</label></p> <p><input type="checkbox" class="group2" id="SuccessStories" value="SuccessStories"/><label for="SuccessStories"> Success Stories</label></p> <p><input type="checkbox" class="group2" id="SocialMedia" value="SocialMedia"/><label for="SocialMedia"> Social Media</label></p> <p><input type="checkbox" class="group2" id="PressContact" value="PressContact"/><label for="PressContact"> Press Contacts</label></p> </li> </ul> 

Or if you have only one group of check boxes, you can simply do this:

 $( 'input:checkbox' ).on( 'change', function () { $( 'input:checkbox').not( this ).prop( 'checked', false ); }); 

 p { margin: 0 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="panel"> <p><input type="checkbox" class="group1" id="News" value="News"/><label for="News"> News</label></p> <p><input type="checkbox" class="group1" id="OfficialStatement" value="OfficialStatement"/><label for="OfficialStatement"> Official Statements</label></p> <p><input type="checkbox" class="group1" id="Speeches" value="Speeches"/><label for="Speeches"> Speech</label></p> <p><input type="checkbox" class="group1" id="PressRelease" value="PressRelease"/><label for="PressRelease"> Press Release</label></p> <p><input type="checkbox" class="group1" id="Communiques" value="Communiques"/><label for="Communiques"> Communique</label></p> <p><input type="checkbox" class="group2" id="PressConference" value="PressConference"/><label for="PressConference"> Press Conference</label></p> <p><input type="checkbox" class="group2" id="Interviews" value="Interviews"/><label for="Interviews"> Interviews</label></p> <p><input type="checkbox" class="group2" id="SuccessStories" value="SuccessStories"/><label for="SuccessStories"> Success Stories</label></p> <p><input type="checkbox" class="group2" id="SocialMedia" value="SocialMedia"/><label for="SocialMedia"> Social Media</label></p> <p><input type="checkbox" class="group2" id="PressContact" value="PressContact"/><label for="PressContact"> Press Contacts</label></p> </div>