Bootstrap 單選按鈕結果

Question

基於下面的 HTML 片段，設法獲得兩行單選按鈕。 當您單擊第一行上的單選按鈕，然后繼續單擊第二行上的任何單選按鈕時，第一行上的單選按鈕的結果就會消失。 我怎樣才能確保，兩行單選按鈕的結果一起出現。

<!-- Start first Div -->
<div>
  
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

</div>
<!-- End first Div -->

<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option1">
  <label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option2">
  <label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
  
</div>

<!-- End Second Div -->

謝謝

約翰

Answer 1

如關於單選按鈕的 MDN 文檔所述：

通過為組中的每個單選按鈕賦予相同的名稱來定義單選組。 建立單選組后，選擇該組中的任何單選按鈕會自動取消選擇同一組中的任何當前選擇的單選按鈕。

因此，如果您希望將第二個<div>單選按鈕分開，則必須為該組按鈕使用不同的name ：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Start first Div --> <div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> <label class="form-check-label" for="inlineRadio1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <label class="form-check-label" for="inlineRadio2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> <label class="form-check-label" for="inlineRadio3">3 (disabled)</label> </div> </div> <!-- End first Div --> <!-- Start second Div --> <div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio4" value="option1"> <label class="form-check-label" for="inlineRadio4">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio5" value="option2"> <label class="form-check-label" for="inlineRadio5">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio6" value="option3" disabled> <label class="form-check-label" for="inlineRadio6">3 (disabled)</label> </div> </div> <!-- End Second Div -->