如果bootstrap5手風琴關閉，則忽略必填的表單欄位

如果該欄位所在的手風琴折疊/關閉，我想忽略表單的必填欄位。

requiredEG：如果我有三個手風琴，并且每個手風琴都有一個輸入，那么第一個手風琴無論如何都必須滿足要求，但是其他手風琴如果在提交表單時折疊，則宣告為必需的那些欄位必須是忽略并且表單必須能夠正常發送到后端。

用例：

手風琴 1：打開。輸入 1（必需）有一個值。

手風琴2：關閉。輸入 2（必需）也有一個值。

手風琴 3：關閉。輸入 3（必需）沒有值。

預期行為：

表單將提交 and 的值Input 1并將Input 2忽略Input 3（即使它被宣告為必填欄位）或只是為Input 3like分配一個值'None'。

我試圖找到類似的問題，但由于手風琴是 bootstrap 5 中的一個新功能，我找不到類似的東西。

最推薦的方法是什么？

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<form>
<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        Input 1
        <input type="text" name="input_1" class="form-control" aria-label="Input 1" required>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
      <div class="accordion-body">
        Input 2
        <input type="text" name="input_2" class="form-control" aria-label="Input 2" required>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
      <div class="accordion-body">
        Input 3
        <input type="text" name="input_3" class="form-control" aria-label="Input 3" required>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form> 

uj5u.com熱心網友回復：

用 Javascript 撰寫一個單擊處理程式，它將查找與選擇器匹配的所有元素并從中.accordion-collapse.collapse:not(.show) input洗掉屬性。required

function handleSubmit() {
  // Make all input fields "required":
  var elements = document.querySelectorAll('.accordion-collapse.collapse input');
  elements.forEach(function(e){
    e.required = true;
  });
    
  // Un-require the hidden input fields:
  var elements = document.querySelectorAll('.accordion-collapse.collapse:not(.show) input');
  elements.forEach(function(e){
    e.required = false;
  });
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<form onclick="handleSubmit();">
<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        Input 1
        <input type="text" name="input_1" class="form-control" aria-label="Input 1" required>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
      <div class="accordion-body">
        Input 2
        <input type="text" name="input_2" class="form-control" aria-label="Input 2" required>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
      <div class="accordion-body">
        Input 3
        <input type="text" name="input_3" class="form-control" aria-label="Input 3" required>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form> 

標籤：javascript 推特引导

上一篇：bootstrap-multiselect創建什么都不做的按鈕，而不是下拉多選串列

下一篇：如何使按鈕在移動視圖中擴展到全寬而不使用引導程式結束pc？