如何实现导轨窗体的Bootstrap开关

Question

我有一个格式如下的字段：

= f.check_box :feedback_required, label: "Feedback required?"

现在，我想要一个带有标签"需要反馈？"的开关，而不是复选框

如何在我的表单中实现此切换：

<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1" name="example">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>

Answer 1

此代码适用于Bootstrap 4.5

<div class="form-group">
<div class="custom-control custom-switch">
<%= f.check_box :feedback_required, class: "custom-control-input", id: "feedback_required" %>
<label class="custom-control-label" for="feedback_required">Feedback required</label>
</div>
</div>

haml:

.form-group
.custom-control.custom-switch
= f.check_box :feedback_required, class: "custom-control-input", id: "feedback_required"
%label.custom-control-label{:for => "feedback_required"} Feedback required

Answer 2

这取决于字段feedback_required是什么，我猜在您的表中，您的feedback-required是一个整数，对吧？因此，如果是0，则反馈为false/不需要，或者如果是1，则反馈是required/true。或者您的feedback_required是一个布尔值，而不是整数。我在这里举两个例子：

<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1" name="example">
<label class="custom-control-label" for="switch1">Check if you require feedback</label>
<%= f.check_box :feedback_required, class:"custom-control-input", 
id: "busy-mode-toggle", 
checked: current_user.feedback_required ? true : false, 
type: "checkbox" %>
</div>

这里的这一部分checked: current_user.feedback_required ? true : false实际上取决于您的feedback_required字段的关联，它是在用户表中还是在项目表中？你已经相应地调整了。我使用current_user作为示例，但您的可能是project.feedback_required ? true : false

或者你可能正在循环通过一个你已经定义的对象，比如：

x.feedback_required ? true : false