javascript - 只允许选中一个复选框并据此控制父标签的类的问题

Question

更新:

我解决了其中一个问题，我的类(class)名称拼写有一个拼写错误......愚蠢的错误!

最后一个问题是，必须总是被选中，所以基本上他们不能取消选中已经选中的选项，除非选择另一个选项。

<小时/>

我一直在尝试解决复选框问题，并且每次只允许选择一个复选框。

基本上，我想要:

• 一次只能选择一个复选框
• 如果选中一个复选框，其父标签应具有“checked-checkbox-parent”类，并且其他复选框父标签应删除该类(因为只应选择一个复选框，因此只有其父标签应具有该类自然)
• 默认情况下始终会选中一个复选框(取决于用户当前的订阅)，这将由数据库控制，但是，为了跟踪，无论订阅类型如何，该订阅的父标签都将具有以下类别: “checked-checkbox-parent”，该复选框将有一个 ':checked' 属性。

相关代码如下:

var $boxes = $('#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"]');

$boxes.on('click', function(e) {
  var $box = $(this);
  if ($box.is(":checked")) {
    var boxGroup = "input:checkbox[name='" + $box.attr("name") + "']";
    $(boxGroup)
      .prop("checked", false)
      .parent()
      .removeClass('checked-checkbox-parent');
    $box
      .prop("checked", true)
      .parent()
      .addClass('checked-checkbox-parent');
  } else {
    $box
      .prop("checked", false)
      .parent()
      .removeClass('checked-checkbox-parent');
  }
});

.profile-edit-btn {
  color: #C99C49;
  text-decoration: none;
}
.modal .modal-dialog .modal-content {
  border-radius: 0;
}
.modal .modal-dialog .modal-content .modal-header {
  background: black;
  color: white;
  font-family: "museo500";
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
}
.modal .modal-dialog .modal-content .modal-header button {
  color: white;
  font-family: "museo500";
  font-size: 30px;
  opacity: 1;
  display: block;
}
.modal .modal-dialog .modal-content .modal-body {
  background: #F6F6F6;
  color: black;
}
#my-details-modal .modal-dialog .modal-content .modal-body form .btn-success {
  border-radius: 0;
  width: auto;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label,
#my-details-modal .modal-dialog .modal-content .modal-body form input {
  width: 100%;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label {
  display: block;
  background: #C99C49;
  margin: 10px 0;
  cursor: pointer;
  padding: 20px;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label.checked-checkbox-parent {
  background: black;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label span {
  font-size: 16px;
  color: white;
  font-family: "museo500";
  font-weight: bold;
  text-transform: uppercase;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label span:nth-of-type(2) {
  font-family: "museo300";
  font-weight: normal;
}
#my-details-modal .modal-dialog .modal-content .modal-body form .confirmation-para {
  color: black;
  font-weight: bold;
  font-family: "museo500";
  font-size: 14px;
  text-transform: uppercase;
}
#my-details-modal .modal-dialog .modal-content .modal-body form input[type="password"] {
  display: block;
  width: 300px;
  font-weight: bold;
  font-family: "museo500";
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px;
  margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<a href="#" class="profile-edit-btn" data-toggle="modal" data-target="#my-details-modal">Open Modal</a>


<div class="modal fade" tabindex="-1" role="dialog" id="my-details-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Update your membership</h4>
      </div>
      <div class="modal-body">
        <form action="#" method="post">
          <label for="one-month">
            <input id="one-month" name="profile-modal-check" type="checkbox">
            <span>Monthly</span>
            <span class="pull-right">(£30/case)</span>
            <div class="clearfix"></div>
          </label>
          <label for="three-month">
            <input id="three-month" name="profile-modal-check" type="checkbox">
            <span>3 Months</span>
            <span class="pull-right">(£29/case)</span>
            <div class="clearfix"></div>
          </label>
          <label for="six-month">
            <input id="six-month" name="profile-modal-check" type="checkbox">
            <span>6 Months</span>
            <span class="pull-right">(£28/case)</span>
            <div class="clearfix"></div>
          </label>
          <label for="twelve-month">
            <input id="twelve-month" name="profile-modal-check" type="checkbox">
            <span>12 Months</span>
            <span class="pull-right">(£27/case)</span>
            <div class="clearfix"></div>
          </label>
          <p class="confirmation-para">Enter your password to confirm</p>
          <input type="password" name="confirmation-password" placeholder="password">
          <input type="sumbit" value="confirm" class="btn btn-success pull-right">
        </form>
        <div class="clearfix"></div>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

如果您有任何疑问，请在下面评论，我希望一切都足够清楚。

Answer 1

你的代码有很多多余的部分。例如，您选择所有需要的复选框 ($boxes)，然后在事件处理程序中再次选择它们 (boxGroup)。为什么？您可以使用 $boxes 变量，它已经存储了您需要的集合。

此外，您还必须收听 change事件，而不是点击。

For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse.

在这种情况下，您不需要检查 this 元素是否已选中。

因此代码应该明显简化。

在事件处理程序中，您只需为所有元素设置“禁用状态” Prop /类，然后为选中的元素设置“启用状态” Prop /类。

var $boxes = $('#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"]');
$boxes.on('change', function(e) {
    $boxes.prop("checked", false)
    .parent().removeClass('checked-checkbox-parent');
    $(this).prop("checked", true)
    .parent().addClass('checked-checkbox-parent');
});