javascript - 单击另一个复选框时禁用复选框

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

我将非常感谢您的帮助。过去一周我一直在做这个。

标签： javascriptjquery

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>