Question

我有一个十个简单复选框的列表，看起来像这样：

 {{ Form::label('waterBox', 'Water:') }}
 {{ Form::checkbox('waterBox', 'yes'); }}

 {{ Form::label('calBox', 'Calories (kcal):') }}
 {{ Form::checkbox('calBox', 'yes'); }}

我不希望在提交表单之前允许用户检查超过5个框。我怎样才能这样做，以便在检查第六个框后，其中一个是未选中的？

Answer 1

随机取消选中其他复选框会让您的用户感到有些困惑。

如何禁用其他复选框？

var $checkboxes = $('input[type=checkbox]');

$checkboxes.change(function () {
    if (this.checked) {
        if ($checkboxes.filter(':checked').length == 5) {
            $checkboxes.not(':checked').prop('disabled', true);
        }
    } else {
        $checkboxes.prop('disabled', false);
    }
});

这是小提琴：http://jsfiddle.net/F57s9/1/

P.S。如果您不使用jQuery，请告诉我，我会为您提供原生解决方案。

Answer 2

你可以调用一个javascript函数（我在这个例子中使用jQuery）查看所有waterBox复选框并将其限制为5，如下所示：

    function limitCheckboxes()
    {
        var checkedBoxCount = $('[name=waterBox]:checked').length;
        $('[name=waterBox]:checked').each(function () {
            if ((checkedBoxCount > 5) &&
                (this.checked))
            {
                this.checked = false;
                checkedBoxCount--;
            }
        });
    }

然后务必使用括号命名您的复选框：

{{ Form::checkbox('waterBox', 'yes', false, ['onclick' => 'limitCheckboxes()']); }}

我没有对此进行测试，但一般原则应该有效。

更新：修复了复选框上缺少的ID属性。

更新2：修复了jQuery选择的复选框和计数。

更新3：摆弄并得到一个有效的示例。上面的代码现在应该反映出来。 :)添加了小提琴代码：http://jsfiddle.net/Miggl/XKB7b/

只允许Laravel中的一定数量的复选框

2 个答案: