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>

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

1 个答案: