Question

我目前在我的应用程序（MVC5）中处理一种多重形式，并且无法弄清楚如何在有特定数量的已检查框之后禁用未选中的框（让我们说3是最大数字，检查了5个中的3个...其他2个应该被禁用，当其中一个被检查的未经检查时，它们应该被启用）网页可能有多个表单/检查列表，每个表单都有不同的约束，所以我正在寻找一种动态类型的工作，并想知道是否有办法这样做，或者我是否坚持使用静态函数检查清单。寻找代码的帮助。

提前致谢。

编辑：试了这个但没有成功

@model IEnumerable<IMA_Elections.Models.Candidate>
@{
    ViewBag.Title = "Demo1";
}
<script src="~\Scripts\jquery-1.10.2.min.js"></script>
<script>window.onload = function() {
    alert( "שלום! הינך עומד\ת להתחיל בתהליך הבחירות. עלייך לבחור עפ''י ההנחיות המצויינות    תחת כל קטגוריה (ניתן גם לא לבחור). הצבעה נעימה" );

    }</script>
    <h1 class="text-center">ועד מרכזי <img src="~/Images/Logo.png"/></h1>

    <div class="row">

    <div style="float:right" class="col-md-3 right">
            <h2 class="text-center alert-success">ארק"ח-קהילה</h2>
        </div>
        <div style="float:right" class="col-md-2">
            <h4 class="text-center alert-success">נציגים</h4>
            <p style="text-align: center;" class="alert-info">בחר\י עד 3 נציגים</p>
            <form>
                 <div class="multiCheckBoxes">
                    @foreach (var item in Model)
                    {
                        <ul style="text-align: right;" class="text-center">
                            @Html.DisplayFor(modelItem => item.Name)
                            @Html.CheckBoxFor(modelItem => item.vote)
                        </ul>
                    }

                    <script src="~\Scripts\jquery-1.10.2.min.js"></script>
                    <script>
                        $('input:checkbox').on('change', function () {
                            var nightLifeLimit = $('input:checkbox:checked').length;
                            if (nightLifeLimit == 3) {
                                $('input:checkbox').each(function () {
                                    if ($(this).is(':checked')) {
                                        return;
                                    } else {
                                        $(this).prop('disabled', true);
                                    }
                                });
                        } else {
                            $('input:checkbox').each(function () {
                                $(this).prop('disabled', false);
                            });
                        }
                    });
                </script>
            </div>
        </form>
    </div>
    <div style="float:right" class="col-md-2 right">
            <h4 class="text-center alert-success">מתמחים</h4>
            <p style="text-align: center; " class="alert-info">בחר\י מתמחה 1</p>
        @foreach (var item in Model)
        {
            <ul style="text-align: right;" class="text-center">
                @Html.DisplayFor(modelItem => item.Name)
                @Html.CheckBoxFor(modelItem => item.vote)
            </ul>
        }
    </div>
    <div style="float:right" class="col-md-2 right">
        <h4 class="text-center alert-success">גמלאים</h4>
        <p style="text-align: center;" class="alert-info">בחר\י גמלאי 1</p>
        @foreach (var item in Model)
        {
            <ul style="text-align: right;" class="text-center">
                @Html.DisplayFor(modelItem => item.Name)
                @Html.CheckBoxFor(modelItem => item.vote)
            </ul>
        }
    </div>
    </div>
    <div class="row">
        <div style="float:right" class="col-md-3">
            <h2 class="text-center alert-success">ארק"ח-בתי"ח</h2>
        </div>
        <div style="float:right" class="col-md-2 right">
            <h4 class="text-center alert-success">נציגים</h4>
            <p style="text-align: center;" class="alert-info">בחר\י עד 4 נציגים</p>
            @foreach (var item in Model)
            {
                <ul style="text-align: right;" class="text-center">
                    @Html.DisplayFor(modelItem => item.Name)
                    @Html.CheckBoxFor(modelItem => item.vote)
                </ul>
            }
        </div>
        <div style="float:right" class="col-md-2 right">
            <h4 class="text-center alert-success">מתמחים</h4>
            <p style="text-align: center; " class="alert-info">בחר\י מתמחה 1</p>
            @foreach (var item in Model)
            {
                <ul style="text-align: right;" class="text-center">
                    @Html.DisplayFor(modelItem => item.Name)
                    @Html.CheckBoxFor(modelItem => item.vote)
                </ul>
            }
        </div>
        <div style="float:right" class="col-md-2 right">
            <h4 class="text-center alert-success">גמלאים</h4>
            <p style="text-align: center;" class="alert-info">בחר\י גמלאי 1</p>
            @foreach (var item in Model)
            {
                <ul style="text-align: right;" class="text-center">
                    @Html.DisplayFor(modelItem => item.Name)
                    @Html.CheckBoxFor(modelItem => item.vote)
                </ul>
            }
        </div>
    </div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="המשך" class="btn btn-success" />
        <input type="button" value="חזור" class="btn btn-danger" />
    </div>
</div>

Answer 1

您可以使用纯Javascript或JQuery执行此操作，此处为WORKING DEMO using JQuery

$('input:checkbox').on('change', function () {
    var nightLifeLimit = $('input:checkbox:checked').length;
    if (nightLifeLimit == 3) {
        $('input:checkbox').each(function () {
            if ($(this).is(':checked')) {
                return;
            } else {
                $(this).prop('disabled', true);
            }
        });
    } else {
        $('input:checkbox').each(function () {
            $(this).prop('disabled', false);
        });
    }
});

目前将限制设为3，您可以随意更改。

复选框：当有多个已选中复选框时启用/禁用未选中复选框

1 个答案: