文章/答案/技术大牛

发布

社区首页 >问答首页 >是否允许只选中一个复选框，并根据该复选框控制父标签的类？

问是否允许只选中一个复选框，并根据该复选框控制父标签的类？
EN

Stack Overflow用户

提问于 2015-12-08 18:45:32

回答 2查看 574关注 0票数 1

更新：

我修正了其中一个问题，我的类名拼写错误.愚蠢的错误！

最后一个问题是必须始终检查一个，所以基本上，除非选择另一个选项，否则他们永远不能取消检查已经检查的选项。

我一直试图解决一个问题与复选框，并只允许一个在任何时候被选中。

基本上，我想：

每次只允许选中一个复选框
如果选中一个复选框，其父标记应该有一个“复选框-父”类，而其他复选框的父母应该删除该类(因为只应该选中一个复选框，那么只有它的父类应该自然拥有该类)。
默认情况下，将始终选中一个复选框(取决于当前订阅用户)，这将从数据库中控制，但是，为了跟踪无论他们的订阅类型如何，该订阅的父标签将有一个“复选框-父”类，而该复选框将有一个‘：复选’的支柱。

相关代码如下：

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

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

javascript

jquery

twitter-bootstrap

checkbox

twitter-bootstrap-3

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-12-08 19:33:24

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

此外，您必须侦听change事件，而不是click事件。

对于复选框、复选框和单选按钮，当用户使用鼠标进行选择时，事件将立即触发。

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

因此，代码应该明显地简化。

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

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');
});

票数 0

Stack Overflow用户

发布于 2015-12-09 03:19:42

经过一段时间的思考和重构，这是我最后的结果，它可以工作，可能不是“最干净”的方式，但它做的正是我所能看到的所需要的。

将始终选中一个复选框。
如果不选择其他选项，任何已选中的框都不能取消选中。
由于我的错误更新，类按预期交换。

请参阅我在代码中所做的评论，以获得更多信息/在前面编写此代码时查看我的思维过程。

//target all the checkboxes for membership type
var $boxes = $('#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"]');

//loop over each one and find the one that is to be checked at the start (determined by the users selected current subscription) and add the checked "state" to it
$boxes.each(function() {
  if ($(this).attr("checked")) {
    $(this)
      .prop("checked", true)
      .parent()
      .addClass('checked-checkbox-parent');
  }
});

//when any of the boxes are clicked
$boxes.on('click', function(e) {
  //target the box being clicked on
  var $box = $(this);
  //if it is checked
  if ($box.is(":checked")) {
    //target all the checkboxes and reset their checked state to false
    $boxes
      .prop("checked", false)
      .parent()
      .removeClass('checked-checkbox-parent');
    //then select the current box being selected and set its checked state to true, thus only one box can ever be checked and one must always be checked.
    $box
      .prop("checked", true)
      .parent()
      .addClass('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" checked>
            <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 -->

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34163613

复制

相似问题

问是否允许只选中一个复选框，并根据该复选框控制父标签的类？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否允许只选中一个复选框，并根据该复选框控制父标签的类？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否允许只选中一个复选框，并根据该复选框控制父标签的类？
EN