时间戳

首页 > 解决方案 > 一个用于禁用某些 CheckBoxFor 的复选框

javascript - 一个用于禁用某些 CheckBoxFor 的复选框

问题描述

我正在开发一个 MVC 程序。

我在视图中使用Razor语言使用CheckBoxFor显示项目列表（从数据库到控制器/模型）：

for (int i = 0; i < Model.ProjectList.Count; i++)
    {
        @Html.HiddenFor(m => m.ProjectList[i].Id)
        <li>@Html.CheckBoxFor(m => m.ProjectList[i].IsChecked,
        new { id = "projectList_" + i, className = "CheckBoxProject" }) 
        @Model.ProjectList[i].Name</li>
    }

这部分工作正常。

我想添加另一个 CheckBox 以取消选中并禁用以前的 ChekBoxFor 并防止它们被选中。我尝试在视图末尾放置一些 JavaScript 来做到这一点：

<input type="checkbox" id="SetBox" value="SetBox" onclick="CheckBoxState(this);">

<script type="text/javascript" onload="loaded=1">
function CheckBoxState(elementRef) {
        document.querySelectorAll('.CheckBoxProject').checked = false;
        document.querySelectorAll('.CheckBoxProject').disabled = true;
};

所以如果我明白我做了什么，“onclick”应该调用名为“CheckBoxState”的Javascript函数。然后抓取所有具有类名 CheckBoxProject 的CheckBoxFor，取消选中并禁用它们。

当我在 Firefox 中尝试它时，当我检查最后一个 CheckBox 并且页面检查器显示类似警告（不是英文）时没有任何反应：未能加载源为“ http://localhost:.. ../浏览器链接“

我不确定如何告诉 View 我正在使用 Javascript 以及Razor语言是否能够与Javascript一起使用。

我尝试了不同的方法来编写 JavaScript，具体取决于我在 StackOverflow 上找到的内容，在几次失败后我辞职去问......

标签： javascriptjqueryasp.net-mvcrazor

解决方案

最后我发现了一些适用于 jQuery 的东西（我不知道）：

<input type="checkbox" id="SetBox"> <label>Uncheck and disable other Checkbox</label>

<script type="text/javascript">

// Call function when the element with the id = SetBox is clicked
$('#SetBox').click(function(){

    var SetBox = document.getElementById("SetBox");

    if (SetBox.checked)
    {
        // select all checkbox (even SetBox) and unchecked + disabled them
        $('input:checkbox').prop('checked', false);
        $('input:checkbox').prop('disabled', true);

        // select only SetBox and check + enable it.
        $('#SetBox').prop('checked', true);
        $('#SetBox').prop('disabled', false);

    }
    else
    {
        // Make all checkbox available if SetBox is unchecked.
        $('input:checkbox').prop('disabled', false);
    }
});

它适用于 Html.CheckBoxFor()。

我仍然有警告：无法加载源为“ http://localhost:..../browserLink ”的脚本，但似乎没关系。

我希望这可以帮助以后的人。

推荐阅读