單擊另一個復選框時禁用該復選框

Question

我一直在嘗試更改此復選框的邏輯，該復選框位於手風琴中，當我單擊一個復選框時，我希望該復選框禁用其他復選框。

這是下面的代碼。

 $(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--> 

非常感謝您的協助。 過去一個星期我一直在做這個。

Answer 1

首先，給同一組，同一類的所有checkboxes 。 然后，使用以下JQuery代碼將checkboxes模擬為radio buttons 。 請參見下面的代碼段：

 $( '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> 

或者，如果只有一組復選框，則只需執行以下操作：

 $( '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>