php - 如何使CakePHP HABTM复选框在列中按字母顺序从上到下

我有餐厅美食（HABTM）列表-用户添加餐厅时，他们从所有美食复选框中进行选择。

复选框输入设置为float：left;与填充/边距...等等，一切都很好-复选框的漂亮网格。

问题/问题：
复选框按字母顺序显示，但不以用户期望的方式显示-它们在重复的行中从左到右（就像您希望它们全部浮动一样）。

我怎样才能使它们成为字母，但要放在垂直栏中？因此，按字母顺序，您将阅读从上到下的内容，然后转到下一列。

我可以找到带有普通PHP的代码，但是在CakePHP中，显示复选框的调用只是：

<?php echo $this->Form->input('RestaurantCuisine', array('multiple'=>'checkbox')); ?>

加成：

JS FIDDLE HERE（html大部分是不可编辑的，因为它是由CakePHP生成的-可以根据需要编辑CakePHP回声-但这不能摆在小提琴之列）

最佳答案

基于这些评论，我创建了一个希望可以接受的jQuery解决方案。

参见：http://jsfiddle.net/svRmL/

var $element = $('#cuisines');
var $elementWidth = $element.find(' > .checkbox').outerWidth(true),
    elementCount = $element.find(' > .checkbox').length,
    $boxes = $element.find(' > .checkbox');

/* just for debug */
$boxes.each(function(i) {
    $(this).find('label').html(i);
});

//set resize function
$(window).resize(function() {
    var perRow = Math.floor($element.width() / $elementWidth),
        i, j, $thisColumn, inc;

    $boxes.appendTo($element); //move elements out of columns from previous resize
    $('.tempColumn').remove(); //destroy old columns
    for (i = 0; i < perRow; i++) {
        $thisColumn = $('<div class="tempColumn" />').appendTo($element).css({
            width: $elementWidth,
            float: 'left'
        });
        inc = Math.ceil(elementCount / perRow);
        for (j = inc * i; j < inc * (i + 1); j++) {
            $boxes.eq(j).appendTo($thisColumn);
        }
    }
}).resize(); //trigger resize function immediately