jquery - 如何使 inputCheckBoxGroup 在 Play Framework 中垂直堆叠

Question

我的模板中有一个 inputCheckboxGroup:

<div class="form-group">
    @inputCheckboxGroup(
        eventForm("tags"),
        options = Seq("CP" -> "CP", "SB" -> "SB", "CM" -> "CM"),
        '_label -> "Where should this event be viewable?")
</div>

不幸的是，Play 呈现的代码水平显示复选框(在一行中)。代码也不是很整洁，我不知道如何包装它以便标签和复选框垂直显示:

<div class="form-group">
    <dl class=" " id="tags_field">
        <dt>Where should this event be viewable?</dt>
        <dd>
          <span class="buttonset" id="tags">
          <div class="checker" id="uniform-tags_CP"><span class=""><input type="checkbox" id="tags_CP" name="tags[]" value="CP"></span></div>
          <label for="tags_CP">CP page (Portal)</label>
          <div class="checker" id="uniform-tags_SB"><span class=""><input type="checkbox" id="tags_SB" name="tags[]" value="SB"></span></div>
          <label for="tags_SB">SB Page</label>
          <div class="checker" id="uniform-tags_CM"><span class=""><input type="checkbox" id="tags_CM" name="tags[]" value="CM"></span></div>
          <label for="tags_CM">CM Page</label>
       </span>
        </dd>
    </dl>
</div>

我如何修改它以使复选框垂直？我正在使用 jQuery 进行一些修改，所以 JS 答案对我来说没问题。

Answer 1

我遇到了同样的问题，不得不为垂直复选框创建一个新模板。模板代码如下:

@import views.html.helper.input
@import views.html.helper.FieldConstructor
@(field: play.api.data.Field, options: Seq[(String,String)], args: (Symbol,Any)*)(implicit handler: FieldConstructor, messages: play.api.i18n.Messages)

@input(field, args.map{ x => if(x._1 == '_label) '_name -> x._2 else x }:_*) { (id, name, value, htmlArgs) =>
  <span class="buttonset" id="@id">
  @defining(field.indexes.flatMap(i => field("[%s]".format(i)).value).toSet) { values =>
@options.map { v =>
  <div>
    <input type="checkbox" id="@(id)_@v._1" name="@{name + "[]"}" value="@v._1" @if(values.contains(v._1)){checked="checked"} @toHtmlArgs(htmlArgs)/>
    <label for="@(id)_@v._1">@v._2</label>
  </div>
}
  }
  </span>
}

与 inputCheckboxGroup 不同，这里的输入被包裹在 div 中。