仅当取消选中所有复选框时，Bootstrap 4 才会崩溃答案

【问题标题】：Bootstrap 4 collapse to work only if all checkbox is uncheck仅当取消选中所有复选框时，Bootstrap 4 才会崩溃
【发布时间】：2018-08-24 08:57:45
【问题描述】：

如果选中任何一个/两个或所有三个复选框，我会尝试显示 upload proof 按钮，并且仅当所有复选框都未选中时才隐藏。

我该怎么办？

.container {
  margin-top: 30px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
  <div class="col-12">
    <label class="checkbox"> Age<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
    <label class="checkbox"> Photo<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
    <label class="checkbox"> Address<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
  </div>
  <div class="12">
    <div class="collapse" id="proof">
      <a href="#" class="btn btn-block btn-primary">Upload Proof</a>
    </div>
  </div>
</div>
</div>

【问题讨论】：

尝试使用带有条件的javascript切换！
我可以查看任何示例代码吗？
<script> $(document).ready(function () { $('[name=FormLabel]').change(function () { var count = 0; $.each($('[name=FormLabel]'), function () { count += (this.checked == true ? 1 : 0); }); if (count >= 2) { $('#proof').show(); } else { $('#proof').hide(); } }); }); </script>
@ElaineByene 你能检查我的答案吗？

标签： javascript jquery twitter-bootstrap bootstrap-4

【解决方案1】：

这是工作代码，我们可以检查选中复选框的数量

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <label class="checkbox"> Age<input type="checkbox" class="checkbox_class"></label>
      <label class="checkbox"> Photo<input type="checkbox" class="checkbox_class"></label>
      <label class="checkbox"> Address<input type="checkbox" class="checkbox_class"></label>
    </div>
    <div class="12">
      <div class="upload_proof hide">
         <a href="#" class="btn btn-block btn-primary">Upload Proof</a>
      </div>
    </div>
 </div>
</div>
<script>
  $(document).ready(function(){
    $("input[type='checkbox']").change(function(event) {
      if ($("input:checkbox:checked").length > 0)
      {
        if($(".upload_proof").hasClass("hide")){
           $(".upload_proof").removeClass("hide")
         }
      }else{
        if(! $(".upload_proof").hasClass("hide")){
          $(".upload_proof").addClass("hide")
        }
      }
    })
  })
</script>

希望对您有所帮助。如果有任何问题，请告诉我。

【讨论】：

【解决方案2】：

$(function() {
   $( "input" ).click(function() {
    	var checked = $("input:checked").length;
      if (checked == 0) {
        $('#proof').hide();
      } else {
        $('#proof').show();
      }
    });
});

.container {
  margin-top: 30px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
  <div class="col-12">
    <label class="checkbox"> Age<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
    <label class="checkbox"> Photo<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
    <label class="checkbox"> Address<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
  </div>
  <div class="12">
    <div class="collapse" id="proof">
      <a href="#" class="btn btn-block btn-primary">Upload Proof</a>
    </div>
  </div>
</div>
</div>

【讨论】：

我认为你应该添加 $('#proof').hide();在功能第一行。这样在启动时按钮将被隐藏。
您可以通过多种方式进行操作。我选择了最简单的方法来解决
它不像你知道的那样工作，因为引导函数首先运行以进行折叠
它似乎在工作，但并不顺利！不过还是谢谢。
你是对的伙伴，但如果你不删除“折叠”和“数据切换”的东西，那么它会显示和隐藏效果。