根據 Bootstrap 5 檔案，標簽需要在復選框標簽之后才能創建類似按鈕的復選框或單選框。直接取自
關于如何減少代碼并改用 collection_check_boxes 的任何建議？
以下是此人回答后的更新代碼：
%fieldset.border.border-dark.p-2.mb-4
%legend Pronouns
.row.mb-4
= f.collection_check_boxes :pronouns, pronoun_list, :itself, :itself, {include_hidden: false} do |b|
.col-md-4.d-grid.d-block.mb-2
= b.check_box(class: "btn-check")
= b.label(:"data-value" => b.value, class: "btn btn-outline-dark text-start btn-lg")
.form-group.mb-4
= f.label :pronouns_other, "Other Pronouns"
= f.text_field :pronouns_other, class: "form-control border border-dark"
uj5u.com熱心網友回復：
我相信您從檔案中復制了示例，該示例旨在顯示如何將復選框放置在標簽元素中。如果那不是您想要的，則不要將復選框放在塊內：
= f.collection_check_boxes :pronouns, pronoun_list, :first, :last do |b|
.col-md-4.d-grid.mb-3.d-block
= b.label(:"data-value" => b.value, class: "btn btn-outline-primary btn-lg mb-2 w-25")
= b.check_box(class: "btn-check")
此外，由于陣列中的對是相同的，您可以只使用普通陣列和Object#itself方法：
= f.collection_check_boxes :pronouns, pronoun_list, :itself, :itself do |b|
.col-md-4.d-grid.mb-3.d-block
= b.label(:"data-value" => b.value, class: "btn btn-outline-primary btn-lg mb-2 w-25")
= b.check_box(class: "btn-check")
def pronoun_list
[
"He/Him/His",
"She/Her/Hers",
"They/Them/Their",
"Zie/Zim/Zir",
"Sie/Sie/Hir",
"Ey/Em/Eir",
"Ve/Ver/Vis",
"Tey/Ter/Tem",
"E/Em/Eir",
"Prefer not to disclose"
]
end
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419422.html
標籤：