一个用于禁用某些 CheckBoxFor 的复选框答案

【问题标题】：One checkbox to disable some CheckBoxFor一个用于禁用某些 CheckBoxFor 的复选框
【发布时间】：2019-02-20 14:57:58
【问题描述】：

我正在开发一个 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:..../browserLink"

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

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

【问题讨论】：

没有未选中或禁用属性，只有选中和禁用。在错误中它说它找不到您的本地服务器，因为您使用冒号而不是分号 localhost.. 但在 2 之后还不错几个月的学习编码..
感谢@bestinamir，我在检查和禁用中更改了属性，我在描述中使用了分号来避免本地主机上的链接，但这是一个错误:-)。我在页面检查器中仍然有错误消息。我要回去研究了。

标签： javascript jquery asp.net-mvc razor

【解决方案1】：

最后我发现了一些适用于 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”的脚本不过好像没关系。

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

【讨论】：