如果勾选了一个或多个复选框，则锁定折叠将打开

Question

如果表单中的任何复选框为true或文本区域包含文本，我想在表单完成或提交时将每个折叠部分固定为打开状态。

HTML

>>> 0b10110101 | x == 0b10111101
True

我尝试使用js / jQuery时，这不是很优雅，因为我正在具体编写每个部分。

<form id='frmSubmit'>
<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne" class='s1'>
      Collapsible Group Item #1
    </a>
      </h4>
    </div>

    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit.....
      </div>

      <div class="form-check form-check-inline">
        <input class="form-check-input s1" type="checkbox" id="section1Checkbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">Checkbox 1</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input s1" type="checkbox" id="section1Checkbox2" value="option2">
        <label class="form-check-label" for="inlineCheckbox2">Checkbox 2</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input s1" type="checkbox" id="section1Checkbox3" value="option3">
        <label class="form-check-label" for="inlineCheckbox3">Checkbox 3</label>
      </div>
      <div class="form-group">
        <label for="comment">Comment:</label>
        <textarea class="form-control" rows="5" id="comment"></textarea>
      </div>
    </div>
  </div>

我还创建了一个小提琴here，其中包含3个示例部分。

目前我很难在提交时进行调试，而且我不确定是否通过折叠发送。